/* Sophia Design System tokens — copied from docs/Sophia Design System.zip (tokens/). Fonts are loaded via <link> in each page. */
/* ============================================================
   Sophia — Color tokens
   Base palette mirrors the Tailwind scales used in the Sophia
   Web UI (blue primary, neutral gray, semantic accents), then
   exposes semantic aliases on top. Light is the canonical theme;
   .dark scope overrides surfaces & text.
   ============================================================ */

:root {
  /* --- Brand blue (primary) --- */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;  /* primary */
  --blue-700: #1d4ed8;  /* primary hover */
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;

  /* --- Neutral gray --- */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;
  --white:    #ffffff;
  --black:    #000000;

  /* --- Semantic accents --- */
  /* success / completed */
  --emerald-50:  #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  /* danger / failed / destructive */
  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  /* warning / caution */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-900: #78350f;
  /* AI accent (Ask Sophia, assistant) */
  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-300: #a5b4fc;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  /* secondary accents used sparingly */
  --purple-50:  #faf5ff;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --pink-400: #f472b6;  /* inline code text */
  --pink-600: #db2777;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in components
     ============================================================ */

  /* Primary action */
  --color-primary:        var(--blue-900);  /* deep navy brand primary */
  --color-primary-hover:  var(--blue-600);  /* brightens on hover */
  --color-primary-soft:   var(--blue-50);   /* tinted bg (active nav, chips) */
  --color-primary-soft-2: var(--blue-100);  /* badge bg */
  --color-on-primary:     var(--white);
  --color-focus-ring:     rgba(59, 130, 246, 0.45); /* blue-500 @ 45% */

  /* Surfaces */
  --surface-page:    var(--gray-50);   /* app background */
  --surface-card:    var(--white);     /* cards, panels, sidebar */
  --surface-sunken:  var(--gray-100);  /* inputs, segmented track, wells */
  --surface-hover:   var(--gray-50);   /* row / item hover */
  --surface-inverse: var(--gray-900);  /* tooltips, code blocks */

  /* Text */
  --text-strong:    var(--gray-900);  /* headings, primary value */
  --text-body:      var(--gray-800);  /* body copy */
  --text-muted:     var(--gray-500);  /* secondary, labels */
  --text-subtle:    var(--gray-400);  /* meta, timestamps, placeholders */
  --text-on-dark:   var(--white);
  --text-link:      var(--blue-600);

  /* Borders & dividers */
  --border-subtle:  var(--gray-100);  /* inner dividers */
  --border-default: var(--gray-200);  /* card & control borders */
  --border-strong:  var(--gray-300);  /* emphasized / hover */

  /* Status (semantic foreground / soft background pairs) */
  --status-success-fg: var(--emerald-600);
  --status-success-bg: var(--emerald-50);
  --status-danger-fg:  var(--red-600);
  --status-danger-bg:  var(--red-50);
  --status-warning-fg: var(--amber-600);
  --status-warning-bg: var(--amber-50);
  --status-info-fg:    var(--blue-600);
  --status-info-bg:    var(--blue-50);
  --status-neutral-fg: var(--gray-600);
  --status-neutral-bg: var(--gray-100);
  --status-ai-fg:      var(--indigo-600);
  --status-ai-bg:      var(--indigo-50);
}

/* ============================================================
   DARK THEME — applied via .dark on a root ancestor
   (matches the app's `darkMode: 'class'` strategy)
   ============================================================ */
.dark {
  --color-primary-soft:   rgba(37, 99, 235, 0.18);
  --color-primary-soft-2: var(--blue-900);

  --surface-page:    var(--gray-950);
  --surface-card:    var(--gray-900);
  --surface-sunken:  var(--gray-800);
  --surface-hover:   rgba(31, 41, 55, 0.5);
  --surface-inverse: var(--black);

  --text-strong:    var(--white);
  --text-body:      var(--gray-100);
  --text-muted:     var(--gray-400);
  --text-subtle:    var(--gray-500);
  --text-link:      var(--blue-400);

  --border-subtle:  var(--gray-800);
  --border-default: var(--gray-800);
  --border-strong:  var(--gray-700);

  --status-success-bg: rgba(5, 150, 105, 0.15);
  --status-danger-bg:  rgba(220, 38, 38, 0.15);
  --status-warning-bg: rgba(217, 119, 6, 0.15);
  --status-info-bg:    rgba(37, 99, 235, 0.15);
  --status-neutral-bg: var(--gray-800);
  --status-ai-bg:      rgba(79, 70, 229, 0.18);
}
/* ============================================================
   Sophia — Typography tokens
   Single family: Inter (loaded in fonts.css). Mono for code.
   Scale mirrors the Tailwind text-* sizes used across the UI.
   ============================================================ */

:root {
  /* Families */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  /* Weights — Inter ships 300–700; 400/500/600/700 do the work */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale (px) — names map to Tailwind text-* */
  --text-2xs: 10px;  /* timestamps, micro-meta */
  --text-xs:  12px;  /* meta, labels, badges */
  --text-sm:  14px;  /* body default, controls */
  --text-base:16px;  /* comfortable body, chat */
  --text-lg:  18px;  /* section headings */
  --text-xl:  20px;  /* card / panel titles */
  --text-2xl: 24px;  /* page H1 */
  --text-3xl: 30px;  /* stat values, auth title */
  --text-4xl: 36px;  /* hero numerals */

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;  /* large bold headings */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* uppercase eyebrows / labels */

  /* ---- Semantic roles ---- */
  --font-display:    var(--weight-bold) var(--text-3xl)/var(--leading-tight) var(--font-sans);
  --font-h1:         var(--weight-bold) var(--text-2xl)/var(--leading-tight) var(--font-sans);
  --font-h2:         var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-sans);
  --font-title:      var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --font-body:       var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --font-body-lg:    var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --font-label:      var(--weight-medium) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --font-meta:       var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);
}
/* ============================================================
   Sophia — Spacing, radii, shadows, layout
   4px base grid. Radii run generous (lg→2xl) per the app's
   soft, rounded card language. Shadows are soft and low.
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii — the UI leans rounded: lg for controls, xl/2xl for cards */
  --radius-xs:   4px;
  --radius-sm:   6px;   /* small chips, segmented items */
  --radius-md:   8px;   /* nav items, default control */
  --radius-lg:   10px;  /* buttons, inputs */
  --radius-xl:   12px;  /* cards, stat tiles */
  --radius-2xl:  16px;  /* panels, message bubbles, modals */
  --radius-full: 9999px;/* pills, badges, avatars */

  /* Shadows — soft, neutral, low spread */
  --shadow-xs:  0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm:  0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md:  0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg:  0 12px 16px -4px rgba(16, 24, 40, 0.10), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
  --shadow-xl:  0 20px 24px -4px rgba(16, 24, 40, 0.12), 0 8px 8px -4px rgba(16, 24, 40, 0.06);
  /* Colored elevation for the primary button */
  --shadow-primary: 0 8px 20px -6px rgba(30, 58, 138, 0.40);

  /* Focus ring (offset glow used on inputs/controls) */
  --ring-width: 3px;
  --ring-color: var(--color-focus-ring);

  /* Layout rhythm (from the live app) */
  --header-h:           64px;
  --sidebar-w:          280px;
  --sidebar-w-collapsed:80px;
  --content-max:        1280px;
}
/* ============================================================
   Sophia — Motion tokens
   Calm, quick, ease-out. Cards lift, buttons press (scale 0.98).
   No bounces on content; springs only on slide-in panels.
   ============================================================ */

:root {
  /* Durations: fast=hovers, base=state changes, slow=panels, slower=fills/entrances */
  --duration-fast:    150ms;  /* @kind other */
  --duration-base:    200ms;  /* @kind other */
  --duration-slow:    300ms;  /* @kind other */
  --duration-slower:  500ms;  /* @kind other */

  /* Easing curves */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);     /* @kind other */

  /* Interaction primitives */
  --press-scale:  0.98;  /* @kind other */
  --lift-y:       -2px;  /* @kind spacing */
}