/* ================================================================
   FILM Markets — Design Tokens (Bloomberg Terminal Pro)
   Import order: tokens.css → base.css → components.css → page.css
   ================================================================ */

@layer tokens {

  :root {
    /* ── Surface ── near-black, not pure black (prevents OLED harshness) */
    --bg-0: #05080f;      /* page background */
    --bg-1: #0a1018;      /* panel */
    --bg-2: #0f1623;      /* card */
    --bg-3: #151e2e;      /* raised / elevated */
    --bg-hover: #1a243a;

    /* ── Border ── hairline system */
    --bd-1: rgba(148, 163, 184, 0.07);
    --bd-2: rgba(148, 163, 184, 0.13);
    --bd-3: rgba(148, 163, 184, 0.22);
    --bd-accent: rgba(240, 185, 11, 0.35);  /* alert / crisis */
    --bd-focus: rgba(96, 165, 250, 0.7);    /* keyboard focus */

    /* ── Text ── 5-level hierarchy */
    --t-0: #f8fafc;   /* headline */
    --t-1: #e2e8f0;   /* body */
    --t-2: #94a3b8;   /* muted */
    --t-3: #64748b;   /* label / caption */
    --t-4: #475569;   /* disabled */

    /* ── Semantic Color — financial markets ── */
    --up:      #10b981;                    /* bullish / gain */
    --up-dim:  #059669;
    --up-bg:   rgba(16, 185, 129, 0.08);
    --up-text: #34d399;

    --down:      #ef4444;                  /* bearish / loss */
    --down-dim:  #dc2626;
    --down-bg:   rgba(239, 68, 68, 0.08);
    --down-text: #f87171;

    --flat:    #94a3b8;                    /* unchanged */
    --flat-bg: rgba(148, 163, 184, 0.06);

    --alert:    #f0b90b;                   /* crisis / breaking */
    --alert-bg: rgba(240, 185, 11, 0.10);
    --warn:     #f59e0b;
    --warn-bg:  rgba(245, 158, 11, 0.10);
    --info:     #06b6d4;
    --info-bg:  rgba(6, 182, 212, 0.10);

    /* ── Asset-class accent colors ── */
    --eq: #3b82f6;   /* equities */
    --fx: #a78bfa;   /* forex */
    --cm: #f0b90b;   /* commodities */
    --fi: #ec4899;   /* fixed income / bonds */
    --cr: #f59e0b;   /* crypto */
    --re: #22c55e;   /* real estate */

    /* ── Typography ── */
    --ff-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
    --ff-sans:    'IBM Plex Sans Thai', 'Inter', system-ui, sans-serif;
    --ff-display: 'Space Grotesk', 'IBM Plex Sans Thai', sans-serif;

    /* Scale — data-dense, terminal-inspired */
    --fs-micro:   10px;  /* tiny labels, tags */
    --fs-xs:      11px;  /* table cells, metadata */
    --fs-sm:      12px;  /* secondary body */
    --fs-base:    13px;  /* primary body */
    --fs-md:      15px;  /* emphasis */
    --fs-lg:      18px;  /* section heading */
    --fs-xl:      22px;  /* page heading */
    --fs-2xl:     28px;  /* hero number */
    --fs-tabular: 13px;  /* monospace numeric columns */

    /* Line height */
    --lh-tight:  1.2;
    --lh-base:   1.5;
    --lh-loose:  1.7;

    /* Letter spacing */
    --ls-tight: -0.02em;
    --ls-base:   0;
    --ls-wide:   0.04em;
    --ls-wider:  0.08em;
    --ls-widest: 0.12em;

    /* ── Spacing — 4px base grid ── */
    --s-0: 2px;
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;

    /* ── Border Radius — sharp, terminal-feel ── */
    --r-0: 1px;
    --r-1: 2px;
    --r-2: 3px;
    --r-3: 4px;
    --r-4: 6px;
    --r-5: 8px;  /* only for large panels */

    /* ── Shadows ── dark-optimized */
    --sh-sm:  0 1px 4px rgba(0, 0, 0, 0.4);
    --sh-md:  0 4px 12px rgba(0, 0, 0, 0.5);
    --sh-lg:  0 8px 24px rgba(0, 0, 0, 0.6);
    --sh-xl:  0 16px 48px rgba(0, 0, 0, 0.7);
    --sh-glow-up:   0 0 8px rgba(16, 185, 129, 0.25);
    --sh-glow-down: 0 0 8px rgba(239, 68, 68, 0.25);
    --sh-glow-gold: 0 0 12px rgba(240, 185, 11, 0.2);

    /* ── Motion ── */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:    cubic-bezier(0.4, 0, 1, 1);
    --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:   120ms;
    --dur-base:   200ms;
    --dur-slow:   350ms;
    --dur-flash:  400ms;  /* price flash animation */

    /* ── Layout ── */
    --header-h:     44px;
    --ticker-h:     36px;
    --statusbar-h:  26px;
    --sidebar-w:    280px;
    --pulse-w:      320px;
    --max-w:        1680px;
    --grid-gap:     3px;   /* terminal-tight grid */
    --grid-gap-md:  8px;
    --grid-gap-lg:  14px;

    /* ── Z-index ladder ── */
    --z-base:    1;
    --z-sticky:  10;
    --z-header:  100;
    --z-overlay: 200;
    --z-modal:   300;
    --z-toast:   400;
  }

  /* ── Light Theme Override ── */
  [data-theme="light"] {
    --bg-0: #f7f9fc;
    --bg-1: #ffffff;
    --bg-2: #ffffff;
    --bg-3: #f1f5f9;
    --bg-hover: #e8edf5;

    --bd-1: rgba(15, 23, 42, 0.06);
    --bd-2: rgba(15, 23, 42, 0.12);
    --bd-3: rgba(15, 23, 42, 0.20);
    --bd-focus: rgba(59, 130, 246, 0.7);

    --t-0: #0f172a;
    --t-1: #1e293b;
    --t-2: #475569;
    --t-3: #64748b;
    --t-4: #94a3b8;

    --up-bg:   rgba(16, 185, 129, 0.10);
    --down-bg: rgba(239, 68, 68, 0.10);
    --flat-bg: rgba(100, 116, 139, 0.08);

    --sh-sm: 0 1px 4px rgba(15, 23, 42, 0.08);
    --sh-md: 0 4px 12px rgba(15, 23, 42, 0.10);
    --sh-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
  }

}