/* Canonical design tokens for admin-tools.

   Source of truth: DESIGN.md at repo root.
   Loaded first by every admin HTML page (before nav.css, wizard.css,
   and per-tool styles). Defines the `--tw-*` custom property namespace
   that every other stylesheet consumes.

   Do not redefine these tokens in per-tool stylesheets. Extend with
   tool-specific values that don't belong in the global palette. */

:root {
  /* ── Surfaces ────────────────────────────────────────────────── */
  --tw-bg:               #0f0f0f;   /* page canvas */
  --tw-card:             #1a1a1a;   /* default card / surface */
  --tw-card-2:           #141414;   /* inset card / surface-low */
  --tw-card-hover:       #1f1f1f;   /* surface-high — row hover, hero */
  --tw-card-highest:     #262626;   /* surface-highest — button hover only */
  --tw-nav-bg:           #0a0a0a;   /* topbar */

  /* ── Borders ─────────────────────────────────────────────────── */
  --tw-border:           #2a2a2a;
  --tw-border-strong:    #3a3a3a;
  --tw-border-soft:      #222222;

  /* ── Text ────────────────────────────────────────────────────── */
  --tw-text:             #f1f5f9;   /* primary on-surface */
  --tw-text-soft:        #d4d4d4;   /* secondary on-surface */
  --tw-muted:            #94a3b8;   /* help, metadata */
  --tw-muted-2:          #7e8a9c;   /* label-caps, section-meta (~4.9:1 on bg) */

  /* ── Brand / interaction ─────────────────────────────────────── */
  --tw-accent:           #CFB382;
  --tw-accent-hover:     #d8be93;
  --tw-accent-strong:    #dcc199;   /* pressed primary */
  --tw-accent-soft:      rgba(207, 179, 130, 0.18);
  --tw-on-accent:        #000000;
  --tw-focus:            #CFB382;

  /* ── Semantic ────────────────────────────────────────────────── */
  --tw-green:            #4ade80;
  --tw-yellow:           #fbbf24;
  --tw-blue:             #60a5fa;
  --tw-red:              #ef4444;
  --tw-purple:           #a78bfa;

  /* ── Semantic soft fills (12% alpha) ─────────────────────────── */
  --tw-green-soft:       rgba(74, 222, 128, 0.12);
  --tw-yellow-soft:      rgba(251, 191, 36, 0.12);
  --tw-blue-soft:        rgba(96, 165, 250, 0.12);
  --tw-red-soft:         rgba(239, 68, 68, 0.12);
  --tw-purple-soft:      rgba(167, 139, 250, 0.12);

  /* ── Semantic backgrounds (status panels, error banners) ──────── */
  --tw-success-bg:       #064e3b;
  --tw-warning-bg:       #422006;
  --tw-info-bg:          #1e3a8a;
  --tw-error-bg:         #4c1d1d;
  --tw-error-text:       #fecaca;
  --tw-info-text:        #c7d2fe;

  /* ── Radius ──────────────────────────────────────────────────── */
  --tw-radius-xs:        3px;
  --tw-radius-sm:        6px;
  --tw-radius:           8px;       /* default */
  --tw-radius-lg:        10px;

  /* ── Type stacks ─────────────────────────────────────────────── */
  --tw-font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tw-font-mono:        'JetBrains Mono', 'SF Mono', Monaco, Consolas, 'Menlo', monospace;

  /* ── Motion ──────────────────────────────────────────────────── */
  --tw-duration-instant: 80ms;   /* chevron rotate, focus ring */
  --tw-duration-fast:    150ms;  /* hover / state changes */
  --tw-duration-default: 240ms;  /* toast slide, panel reveal */
  --tw-duration-slow:    360ms;  /* hero number tween, stagger root */
  --tw-ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --tw-ease-emphasized:  cubic-bezier(0.2, 0, 0, 1.2);

  /* ── Icon sizing ─────────────────────────────────────────────── */
  --tw-icon-sm:          12px;
  --tw-icon-md:          14px;
  --tw-icon-lg:          18px;
  --tw-icon-stroke:      1.5;
}

/* Global reduced-motion guard. Any component using --tw-duration-*
   tokens automatically slows to a 1ms transition; CSS-keyframe
   animations should also wrap their long-running variants in
   @media (prefers-reduced-motion: no-preference). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Inline-icon utility. Components that ship <svg> via Icons.render()
   inherit currentColor + sizing from here. */
.icon {
  display: inline-block;
  vertical-align: -2px;
  width: var(--tw-icon-md);
  height: var(--tw-icon-md);
  stroke: currentColor;
  stroke-width: var(--tw-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}
.icon.is-sm { width: var(--tw-icon-sm); height: var(--tw-icon-sm); }
.icon.is-lg { width: var(--tw-icon-lg); height: var(--tw-icon-lg); }