/* ============================================================================
   OMNISOLVER SPEECH · Design Tokens — calm light office/enterprise theme.
   "Working memory over conversations": milky-grey canvas, white cards, one
   violet-blue accent (+ teal support), soft shadows, generous air.
   NOT a neon AI startup. Same family DNA as Code/Skills/Models — light kin.

   THIS FILE IS THE ONLY SOURCE OF COLOR / SPACE / TYPE / SHADOW / MOTION VALUES.
   All other CSS references these custom properties (CONTRACT.md §11).
   ============================================================================ */
:root {
  /* ---- Surfaces (light depth stack, canvas → raised) ---- */
  --bg:          #F6F7FB;   /* page canvas — milky grey */
  --bg-2:        #EEF1F7;   /* secondary bg: wells, rails, alt sections */
  --card:        #FFFFFF;   /* card / panel */
  --card-2:      #FBFCFE;   /* nested card / hover row / input bg */
  --ink-panel:   #1B1E27;   /* dark ink panel (footer / contrast blocks) */
  --ink-panel-2: #232734;   /* raised element on ink panel */

  /* ---- Text ---- */
  --text:        #16181D;   /* primary */
  --text-2:      #6B7280;   /* secondary */
  --text-muted:  #9AA3B2;   /* muted / placeholders */
  --text-faint:  #C3CAD6;   /* faint / disabled */
  --text-inv:    #F4F5F9;   /* text on ink panel / accent fills */

  /* ---- Borders ---- */
  --line:        #E2E6EF;   /* default border */
  --line-soft:   #ECEFF5;   /* hairline / dividers */
  --line-strong: #CDD4E0;   /* inputs, emphasized edges */
  --line-accent: rgba(109, 94, 246, 0.35);

  /* ---- Accent (one violet-blue; teal as supporting voice) ---- */
  --accent:        #6D5EF6;
  --accent-hi:     #8A7DF8;
  --accent-lo:     #5747E0;
  --accent-soft:   rgba(109, 94, 246, 0.10);   /* tinted chips / hovers */
  --accent-glow:   rgba(109, 94, 246, 0.26);   /* soft glow, never harsh */
  --accent-2:      #18B8A6;
  --accent-2-soft: rgba(24, 184, 166, 0.12);

  /* ---- Status (calm, office-visible) ---- */
  --ok:          #22B573;   --ok-soft:     rgba(34, 181, 115, 0.12);
  --warn:        #F4A340;   --warn-soft:   rgba(244, 163, 64, 0.14);
  --danger:      #E05E5E;   --danger-soft: rgba(224, 94, 94, 0.12);
  --info:        #6B7280;

  /* ---- Gradients / hero scene ---- */
  --grad-accent: linear-gradient(135deg, #8A7DF8 0%, #6D5EF6 55%, #5747E0 100%);
  --grad-text:   linear-gradient(180deg, #16181D 0%, #4A4F5C 130%);
  --grad-hero:   radial-gradient(120% 110% at 50% -10%, #FFFFFF 0%, #F6F7FB 62%, #EEF1F7 100%);
  /* faint layered tint on the landing canvas — depth without noise */
  --scene:
     radial-gradient(880px 560px at 82% -6%, rgba(109, 94, 246, 0.07), transparent 60%),
     radial-gradient(720px 520px at 8% 12%, rgba(24, 184, 166, 0.05), transparent 58%),
     radial-gradient(900px 640px at 50% 115%, rgba(109, 94, 246, 0.04), transparent 62%);

  /* ---- Typography ---- */
  --font-sans: "Inter", "Manrope", "Segoe UI Variable Display", "Segoe UI",
               system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "IBM Plex Mono",
               ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11px;  --fs-sm: 13px;  --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px;
  --fs-xl: 24px;  --fs-2xl: 32px; --fs-3xl: 42px;
  --fs-hero: clamp(32px, 4.2vw, 54px);
  --lh-tight: 1.08; --lh-snug: 1.3; --lh-body: 1.62;
  --tracking-tight: -0.022em; --tracking-caps: 0.18em;

  /* ---- Radii ---- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  --r-xl: 26px; --r-2xl: 34px; --r-pill: 999px;

  /* ---- Spacing ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;  --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px; --s-12: 128px;

  /* ---- Elevation (soft office shadows — low alpha, wide blur) ---- */
  --sh-1: 0 1px 2px rgba(22, 24, 29, 0.05);
  --sh-2: 0 6px 20px rgba(22, 24, 29, 0.07);
  --sh-3: 0 16px 44px rgba(22, 24, 29, 0.10);
  --sh-4: 0 30px 80px rgba(22, 24, 29, 0.14);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --glow-accent: 0 0 0 1px var(--line-accent), 0 12px 40px var(--accent-glow);
  --ring: 0 0 0 3px rgba(109, 94, 246, 0.30);

  /* ---- Motion (transform/opacity only; never transition: all) ---- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms; --t-mid: 260ms; --t-slow: 520ms;

  /* ---- Layout ---- */
  --maxw: 1180px; --maxw-wide: 1400px;
  --nav-h: 64px;
  --rail-w: 264px;         /* app left panel (recordings/filters) */
  --rail-right-w: 320px;   /* app right panel (status/player/tasks/export) */
  --z-bg: 0; --z-nav: 100; --z-pop: 200; --z-modal: 300; --z-toast: 400;

  color-scheme: light;
}

/* Timecodes, durations, counters: keep digits aligned everywhere. */
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
}