/* ============================================================
   HELIX — tokens
   Precision modern terminal. Calm, exact, friendly.
   Signal AMBER, never trading-green. Cool slate base.
   Premium = the chrome of a fine instrument.
   ============================================================ */

:root {
  /* ---- typography ---- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-micro:    0.72rem;
  --fs-eyebrow:  0.74rem;
  --fs-body:     0.95rem;
  --fs-lead:     1.075rem;
  --fs-h4:       1.125rem;
  --fs-h3:       1.5rem;
  --fs-h2:       2rem;
  --fs-display:  clamp(2.75rem, 6vw, 5.5rem);
  --fs-numeric:  clamp(2rem, 3.4vw, 2.6rem);

  --lh-display: 1.02;
  --lh-tight:   1.12;
  --lh-body:    1.55;

  --tracking-eyebrow: 0.14em;
  --tracking-display: -0.028em;
  --tracking-mono:    0.02em;

  /* ---- color (light) ---- */
  --paper:        #F4F5F7;   /* cool light slate */
  --paper-2:      #ECEEF2;
  --paper-3:      #E1E4EA;
  --surface:      #FFFFFF;   /* card / panel */
  --ink:          #0B1220;   /* near-black ink-navy */
  --ink-soft:     #2A3142;
  --slate:        #5A6478;
  --slate-soft:   #8993A4;
  --rule:         rgba(11, 18, 32, 0.10);
  --rule-strong:  rgba(11, 18, 32, 0.20);
  --rule-grid:    rgba(11, 18, 32, 0.05);

  --signal:       #C7741B;   /* amber — THE color */
  --signal-soft:  #E59A4D;
  --signal-tint:  rgba(199, 116, 27, 0.12);

  --positive:     #1F6E4A;   /* deep forest, not neon green */
  --positive-soft:#E0EFE7;
  --negative:     #94352A;   /* oxblood, not red */
  --negative-soft:#F3E2DE;
  --info:         #1E4F8A;

  --field:        #FFFFFF;
  --shadow-sm:    0 1px 0 rgba(11,18,32,0.04);
  --shadow-md:    0 1px 0 rgba(11,18,32,0.04), 0 12px 28px -16px rgba(11,18,32,0.22);

  /* ---- structure ---- */
  --radius-sm:  3px;
  --radius-md:  4px;
  --radius-lg:  6px;
  --radius-pill: 999px;
  --hairline:   1px solid var(--rule);
  --hairline-strong: 1px solid var(--rule-strong);

  --container-max: 1280px;
  --gutter:        clamp(20px, 4vw, 56px);
  --section-pad:   clamp(56px, 8vw, 112px);

  /* signal dot grid — used as section background */
  --dot-color:  rgba(11, 18, 32, 0.07);
  --dot-size:   18px;
}

html.dark {
  /* ---- color (dark = deep slate, no black) ---- */
  --paper:        #0B111C;
  --paper-2:      #0F1623;
  --paper-3:      #131B2B;
  --surface:      #131B2B;
  --ink:          #E6E9F2;
  --ink-soft:     #C2C8D6;
  --slate:        #8A93A6;
  --slate-soft:   #5F6878;
  --rule:         rgba(230, 233, 242, 0.10);
  --rule-strong:  rgba(230, 233, 242, 0.22);
  --rule-grid:    rgba(230, 233, 242, 0.06);

  --signal:       #E89542;
  --signal-soft:  #F2B77B;
  --signal-tint:  rgba(232, 149, 66, 0.16);

  --positive:     #4FAE83;
  --positive-soft:rgba(79, 174, 131, 0.16);
  --negative:     #D17563;
  --negative-soft:rgba(209, 117, 99, 0.16);
  --info:         #6FA0E0;

  --field:        #0F1623;
  --dot-color:    rgba(230, 233, 242, 0.06);
  --shadow-md:    0 1px 0 rgba(0,0,0,0.5), 0 16px 30px -16px rgba(0,0,0,0.6);
}