/* ============================================================
   Infinitrade — Design Tokens (canonical)
   ------------------------------------------------------------
   Single source of truth for every CSS value in the product.
   styles.css and mobile-styles.css consume ONLY these vars.
   Mirror of tokens.json. Do not hardcode hex/px outside this file.
   v1.0.0 · 2026-06-16
   ============================================================ */

:root {
  /* ---- Surface ---- */
  --bg-app:    #05070b;  /* ground · void black */
  --bg-shell:  #0a0d13;  /* top bar · nav · status bar */
  --bg-panel:  #10141c;  /* cards · default panel ground */
  --bg-raised: #151a24;  /* hover · popovers · tooltips */
  --bg-input:  #1b2230;  /* inputs · chips · search fields */

  /* ---- Border ---- */
  --border-subtle:  rgba(255, 255, 255, 0.05);  /* hairline separators */
  --border-default: rgba(255, 255, 255, 0.08);  /* standard borders · inputs */
  --border-strong:  rgba(255, 255, 255, 0.14);  /* emphasized · hover */

  /* ---- Text ---- */
  --text-primary:   #e6e9ef;  /* headings · values */
  --text-secondary: #98a1b1;  /* body · descriptions */
  --text-tertiary:  #6b7383;  /* meta · timestamps */
  --text-muted:     #4a5060;  /* labels · disabled · placeholder */

  /* ---- Signal: accent ---- */
  --accent:       #22d3ee;
  --accent-soft:  rgba(34, 211, 238, 0.12);   /* fills · active-row bg */
  --accent-line:  rgba(34, 211, 238, 0.35);   /* borders on accent surfaces */

  /* ---- Signal: semantic ---- */
  --pass:          #34d399;
  --pass-soft:     rgba(52, 211, 153, 0.12);
  --block:         #f87171;
  --block-soft:    rgba(248, 113, 113, 0.12);
  --warn:          #fbbf24;
  --warn-soft:     rgba(251, 191, 36, 0.10);
  --evidence:      #a78bfa;
  --evidence-soft: rgba(167, 139, 250, 0.10);

  /* ---- Gradient ---- */
  --grad-brand: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
  --grad-glow:  radial-gradient(ellipse 80% 40% at 50% 0%, rgba(34, 211, 238, 0.08), transparent);

  /* ---- Type: family ---- */
  --font-sans: 'Inter', 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, Consolas, monospace;

  /* ---- Type: display scale (marketing / auth surfaces only) ---- */
  --fs-display-xl: 58px;  /* landing hero H1 */
  --fs-display-lg: 42px;  /* CTA-band headline */
  --fs-display-md: 38px;  /* marketing section title */
  --fs-display-sm: 26px;  /* auth headline · split-row H3 */
  --fs-lead:       19px;  /* hero/section lead paragraph */

  /* ---- Type: size ramp (app surfaces) ---- */
  --fs-hero:    32px;  /* page H1 (once per surface) */
  --fs-title:   22px;  /* canvas / object title */
  --fs-card:    15px;  /* k-pane title · card title */
  --fs-body:    13px;  /* body · row label */
  --fs-small:   12px;  /* meta rows · captions */
  --fs-label:   10px;  /* section labels · column headers (uppercase) */
  --fs-value:   14px;  /* mono · P/L · greeks */
  --fs-meta:    11px;  /* mono · IDs · timestamps */

  /* ---- Type: weight ---- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Type: tracking ---- */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0;
  --tracking-label:   0.10em;  /* uppercase section labels */

  /* ---- Type: line-height ---- */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.45;
  --lh-loose: 1.65;

  /* ---- Space (multiples of 2) ---- */
  --space-1:  2px;
  --space-2:  4px;
  --space-4:  8px;
  --space-6:  12px;
  --space-8:  16px;
  --space-12: 24px;
  --space-16: 32px;
  --space-24: 48px;

  /* ---- Radius ---- */
  --r-none:    0;
  --r-sm:      4px;   /* inline code · kbd */
  --r-control: 6px;   /* buttons · small chips */
  --r-panel:   8px;   /* cards · k-pane sections */
  --r-lg:      12px;  /* mobile cards · large containers */
  --r-pill:    9999px;

  /* ---- Shadow ---- */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.02), 0 12px 28px rgba(0, 0, 0, 0.50);  /* floating workspace panels (adopted from shipping workspace.css, 2026-08-07) */
  --shadow-glow:  0 0 0 4px rgba(34, 211, 238, 0.18);  /* annotation pin halo */

  /* ---- Layout: shell ---- */
  --shell-topbar:    44px;
  --shell-crumbs:    36px;
  --shell-status:    24px;
  --zone-object:     260px;
  --zone-knowledge:  360px;

  /* ---- Layout: content widths (marketing / auth) ---- */
  --w-content: 1120px;  /* landing max content width */
  --w-prose:   680px;   /* readable column · conversation · hero sub */
  --w-form:    380px;   /* auth card */

  /* ---- Surface treatments ---- */
  --nav-blur:  12px;    /* sticky nav backdrop-filter */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ---- Z-index ---- */
  --z-base:     0;
  --z-sticky:   10;
  --z-overlay:  100;
  --z-modal:    1000;
  --z-toast:    2000;

  /* ---- Mobile overrides ---- */
  --m-fs-body:   15px;  /* +2px for arm's-length reading */
  --m-fs-card:   15px;
  --m-cta-min:   50px;  /* >= Apple HIG 44px target */
  --m-hit-min:   44px;
}