/* ============================================================================
   Command Center — Design Tokens
   ----------------------------------------------------------------------------
   The single source of truth for color, type, spacing, radius, elevation and
   motion. Everything else (theme.css, buttons.css, per-page CSS) consumes these
   custom properties — never raw hex values.

   Aesthetic: restrained "developer tool" identity (Linear / Vercel / GitHub
   Primer family) — near-neutral greys, one confident indigo accent, semantic
   colors reserved for status only.

   Theming model:
     :root                      → light theme defaults (the semantic tokens)
     [data-theme="dark"]        → explicit dark override (set by theme-init JS)
     @media (prefers-color-scheme: dark) → dark when no explicit choice made
   The semantic tokens (--bg, --text, --primary, …) are what components read, so
   a single attribute flip re-themes the whole app — no duplicated stylesheets.
   ========================================================================== */

:root {
  /* --- Type ------------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.875rem;  /* 14px — app base */
  --text-md:   1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Spacing scale (4px base) ----------------------------------------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */

  /* --- Radius ----------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 120ms var(--ease);
  --transition: 180ms var(--ease);
  --transition-slow: 280ms var(--ease);

  /* --- Layout ----------------------------------------------------------- */
  --header-height: 56px;
  --content-max: 1200px;
  --content-max-wide: 1400px;

  /* =========================================================================
     COLOR — Light theme (default)
     Primitive ramps stay theme-agnostic; the semantic tokens below are what
     components read and what dark mode remaps.
     ===================================================================== */

  /* Neutral ramp (cool grey) */
  --gray-0:   #ffffff;
  --gray-25:  #fbfbfc;
  --gray-50:  #f6f7f9;
  --gray-100: #eceef1;
  --gray-200: #e2e4e9;
  --gray-300: #d2d5dc;
  --gray-400: #b1b6c0;
  --gray-500: #8a8f9c;
  --gray-600: #60646f;
  --gray-700: #454952;
  --gray-800: #2c2f36;
  --gray-900: #1c1d22;
  --gray-950: #111216;

  /* Brand — indigo accent */
  --indigo-50:  #eef0ff;
  --indigo-100: #e0e2ff;
  --indigo-300: #a9a8ff;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;

  /* Semantic hue primitives */
  --green-50:  #e8f6ed;  --green-500: #2da44e;  --green-600: #1f7a3d;
  --amber-50:  #fdf6e3;  --amber-500: #bf8700;  --amber-600: #9a6b00;
  --red-50:    #fdecee;  --red-500:   #cf222e;  --red-600:   #a40e26;
  --blue-50:   #e9f1fd;  --blue-500:  #0969da;

  /* ---- Semantic tokens (LIGHT) ---- */
  --bg:            var(--gray-50);    /* app canvas               */
  --bg-subtle:     var(--gray-100);   /* recessed wells, code bg  */
  --surface:       var(--gray-0);     /* cards, panels            */
  --surface-hover: var(--gray-50);
  --surface-elevated: var(--gray-0);

  --text:          var(--gray-900);
  --text-muted:    var(--gray-600);
  --text-subtle:   var(--gray-500);
  --text-inverse:  var(--gray-0);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);

  --primary:        var(--indigo-600);
  --primary-hover:  var(--indigo-700);
  --primary-active: var(--indigo-800);
  --primary-fg:     #ffffff;
  --primary-text:   var(--indigo-700);   /* indigo used as text/link on light bg (AA) */
  --primary-subtle: var(--indigo-50);

  --success:        var(--green-500);
  --success-text:   var(--green-600);
  --success-subtle: var(--green-50);
  --warning:        var(--amber-500);
  --warning-text:   var(--amber-600);
  --warning-subtle: var(--amber-50);
  --danger:         var(--red-500);
  --danger-text:    var(--red-600);
  --danger-subtle:  var(--red-50);
  --info:           var(--blue-500);
  --info-subtle:    var(--blue-50);

  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.35);

  /* Elevation (light) */
  --shadow-xs: 0 1px 2px rgba(16, 18, 22, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 18, 22, 0.08), 0 1px 2px rgba(16, 18, 22, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 18, 22, 0.10), 0 2px 4px rgba(16, 18, 22, 0.05);
  --shadow-lg: 0 12px 28px rgba(16, 18, 22, 0.16);

  /* Console (terminal/Claude output) surfaces — same in light/dark by design,
     these read as "the terminal" regardless of app theme but are overridden in
     dark to blend. */
  --console-bg:     #ffffff;
  --console-fg:     var(--gray-700);
  --console-border: var(--gray-200);

  color-scheme: light;
}

/* ===========================================================================
   COLOR — Dark theme (designed, not inverted greys)
   Cool near-black slate, lifted indigo so it stays vivid on dark surfaces.
   ========================================================================= */
:root[data-theme="dark"] {
  --bg:            #0e0f12;
  --bg-subtle:     #16181d;
  --surface:       #181a20;
  --surface-hover: #1f222a;
  --surface-elevated: #1f222a;

  --text:          #e7e8ec;
  --text-muted:    #9ba1ad;
  --text-subtle:   #6e7480;
  --text-inverse:  #0e0f12;

  --border:        #2a2d35;
  --border-strong: #3a3e48;

  --primary:        var(--indigo-500);
  --primary-hover:  #7679f5;
  --primary-active: #8b8df7;
  --primary-fg:     #ffffff;
  --primary-text:   var(--indigo-300);
  --primary-subtle: #1c1d33;

  --success:        #3fb950;
  --success-text:   #56d364;
  --success-subtle: #102a17;
  --warning:        #d29922;
  --warning-text:   #e3b341;
  --warning-subtle: #2a2010;
  --danger:         #f85149;
  --danger-text:    #ff7b72;
  --danger-subtle:  #2c1416;
  --info:           #58a6ff;
  --info-subtle:    #11243d;

  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.45);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.6);

  --console-bg:     #0e0f12;
  --console-fg:     #c9ccd3;
  --console-border: #2a2d35;

  color-scheme: dark;
}

/* Honor OS preference when the user hasn't made an explicit choice
   (theme-init only sets data-theme when there's a stored value or a page
   default; this covers the "no attribute at all" case defensively). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #0e0f12; --bg-subtle: #16181d; --surface: #181a20;
    --surface-hover: #1f222a; --surface-elevated: #1f222a;
    --text: #e7e8ec; --text-muted: #9ba1ad; --text-subtle: #6e7480; --text-inverse: #0e0f12;
    --border: #2a2d35; --border-strong: #3a3e48;
    --primary: var(--indigo-500); --primary-hover: #7679f5; --primary-active: #8b8df7;
    --primary-text: var(--indigo-300); --primary-subtle: #1c1d33;
    --success: #3fb950; --success-text: #56d364; --success-subtle: #102a17;
    --warning: #d29922; --warning-text: #e3b341; --warning-subtle: #2a2010;
    --danger: #f85149; --danger-text: #ff7b72; --danger-subtle: #2c1416;
    --info: #58a6ff; --info-subtle: #11243d;
    --console-bg: #0e0f12; --console-fg: #c9ccd3; --console-border: #2a2d35;
    color-scheme: dark;
  }
}