/* ==========================================================================
   QuantSenti — Design Tokens & Theme System
   --------------------------------------------------------------------------
   Single source of truth for colors, spacing, radii, shadows and motion.
   The dark palette is a harmonious counterpart of the light palette,
   anchored on the brand navy #002f6c.
   ========================================================================== */

:root {
  /* ── Typography ──────────────────────────────────────────── */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Lato', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  clamp(2.25rem, 4vw + 1rem, 3.75rem);

  --lh-tight: 1.15;
  --lh-base:  1.55;

  /* ── Spacing scale (8-pt) ────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;

  /* ── Radii & shadows ─────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 2vw + 0.5rem, 2.5rem);
  --header-h: 64px;
}

/* ─────────────────────────────────────────────────────────────
   LIGHT theme (default)
   bg #faf9f6 · primary #002f6c · text #0f172a
   ───────────────────────────────────────────────────────────── */
:root,
[data-theme='light'] {
  color-scheme: light;

  --color-bg:        #faf9f6;
  --color-bg-elev:   #ffffff;
  --color-surface:   #ffffff;
  --color-surface-2: #f3f1ec;

  --color-primary:        #002f6c;
  --color-primary-strong: #001f48;
  --color-primary-soft:   rgba(0, 47, 108, 0.08);
  --color-primary-ring:   rgba(0, 47, 108, 0.18);

  --color-text:    #0f172a;
  --color-text-2:  #334155;
  --color-muted:   #64748b;
  --color-on-primary: #ffffff;

  --color-border:    #e6e2d8;
  --color-border-strong: #c8c2b3;
  --color-divider:   rgba(15, 23, 42, 0.08);

  --color-accent:    #00b3d6;        /* teal accent for "tech feel" */
  --color-accent-soft: rgba(0, 179, 214, 0.12);

  --color-bullish:   #047857;
  --color-bearish:   #b91c1c;
  --color-neutral:   #6b7280;
  --color-warning:   #b45309;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 6px 24px -8px rgba(15, 23, 42, 0.12), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 50px -20px rgba(0, 47, 108, 0.18), 0 8px 20px -10px rgba(15, 23, 42, 0.08);

  --grid-bg: radial-gradient(circle at 1px 1px, rgba(0, 47, 108, 0.07) 1px, transparent 0);

  --hero-glow: radial-gradient(60% 50% at 50% 0%, rgba(0, 47, 108, 0.10), transparent 70%);
}

/* ─────────────────────────────────────────────────────────────
   DARK theme — harmonious counterpart of #002f6c
   Deep navy bg, icy primary, accent teal preserved
   ───────────────────────────────────────────────────────────── */
[data-theme='dark'] {
  color-scheme: dark;

  --color-bg:        #060a14;
  --color-bg-elev:   #0c1322;
  --color-surface:   #0f172a;
  --color-surface-2: #131c30;

  --color-primary:        #cfe1ff;
  --color-primary-strong: #ffffff;
  --color-primary-soft:   rgba(207, 225, 255, 0.10);
  --color-primary-ring:   rgba(207, 225, 255, 0.22);

  --color-text:    #e2e8f0;
  --color-text-2:  #c4cee0;
  --color-muted:   #94a3b8;
  --color-on-primary: #001226;

  --color-border:    #1f2a44;
  --color-border-strong: #2c3a5c;
  --color-divider:   rgba(226, 232, 240, 0.10);

  --color-accent:      #38e1ff;
  --color-accent-soft: rgba(56, 225, 255, 0.16);

  --color-bullish:   #34d399;
  --color-bearish:   #f87171;
  --color-neutral:   #9aa6bf;
  --color-warning:   #fbbf24;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 30px -10px rgba(0, 0, 0, 0.55), 0 2px 8px -2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 30px 80px -30px rgba(56, 225, 255, 0.18), 0 12px 30px -12px rgba(0, 0, 0, 0.6);

  --grid-bg: radial-gradient(circle at 1px 1px, rgba(207, 225, 255, 0.08) 1px, transparent 0);

  --hero-glow: radial-gradient(60% 50% at 50% 0%, rgba(56, 225, 255, 0.12), transparent 70%);
}

/* Honour OS preference until the user picks one (handled by JS pre-paint). */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}