/* ═══════════════════════════════════════════════════════════════
   HelmHero v1 — tokens.css
   Single source of truth for all design tokens.
   Never hardcode hex colors, font names, or radii in other files.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand colors ──────────────────────────────────────────── */
  --hh-blue:          #147EFB;
  --hh-blue-bright:   #3E97FF;
  --hh-aqua:          #00D2A6;
  --hh-aqua-bright:   #19E8C2;
  --hh-aqua-deep:     #00A884;
  --hh-navy:          #0A1B2E;
  --hh-navy-2:        #0E2438;

  /* ── Brand gradient ────────────────────────────────────────── */
  --hh-grad:          linear-gradient(118deg, #00D2A6 0%, #147EFB 78%);

  /* ── Light surface tokens ──────────────────────────────────── */
  --hh-bg:            #F4F7FB;
  --hh-surface:       #FFFFFF;
  --hh-surface-2:     #EEF3F9;
  --hh-ink:           #0A1B2E;
  --hh-ink-2:         #3C4F63;
  --hh-muted:         #697C90;
  --hh-border:        #DBE3EC;
  --hh-border-soft:   #E8EEF5;
  --hh-tint-blue:     #E8F1FE;

  /* ── Semantic tints ────────────────────────────────────────── */
  --hh-tint-amber:    #fef5e6;
  --hh-tint-green:    #e6f9f2;
  --hh-tint-red:      #fcecea;

  /* ── Caution tier ──────────────────────────────────────────── */
  --hh-caution-bg:     #fffbf0;
  --hh-caution-border: #f0d78a;
  --hh-caution-text:   #6a5010;

  /* ── Functional colors ─────────────────────────────────────── */
  --amber:            #d4820a;
  --red:              #c0392b;
  --hh-placement:     #f0b429;

  /* ── Leg colors (consistent across maps, charts, tables) ───── */
  --leg-upwind:       #147EFB;   /* brand blue */
  --leg-downwind:     #00A884;   /* aqua-deep */
  --leg-reaching:     #d4820a;   /* amber */

  /* ── Typography ────────────────────────────────────────────── */
  --display:   'Montserrat', sans-serif;
  --sans:      'Hanken Grotesk', sans-serif;
  --mono:      'JetBrains Mono', monospace;

  /* Aliases (legacy — prefer the above) */
  --hh-display: var(--display);
  --hh-body:    var(--sans);
  --hh-mono:    var(--mono);

  /* ── Radii ─────────────────────────────────────────────────── */
  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    12px;
  --r-xl:    16px;
  --r-pill:  999px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(10,27,46,.08), 0 1px 2px rgba(10,27,46,.05);
  --shadow-md:  0 4px 12px rgba(10,27,46,.10), 0 2px 4px rgba(10,27,46,.06);
  --shadow-lg:  0 8px 24px rgba(10,27,46,.13), 0 3px 8px rgba(10,27,46,.08);
  --shadow-btn: 0 2px 8px rgba(20,126,251,.30);

  /* ── Header / nav (dark surfaces) ─────────────────────────── */
  --hdr:      var(--hh-navy);
  --nav-bg:   rgba(10,27,46,.96);

  /* ── Shorthand aliases used in components ──────────────────── */
  --ink:      var(--hh-ink);
  --ink-2:    var(--hh-ink-2);
  --muted:    var(--hh-muted);
  --border:   var(--hh-border);
  --surface:  var(--hh-surface);
  --panel:    var(--hh-surface);       /* alias for v8 compat */
  --pb:       var(--hh-border);        /* alias for v8 compat */
  --pb2:      var(--hh-border-soft);   /* alias for v8 compat */
  --faint:    #8CA0B3;                 /* v8 faint text / disabled */
  --accent:   var(--hh-blue);
  --green:    var(--hh-aqua-deep);
  --navy:     var(--hh-ink);           /* alias — ink on light surface */
}