/* HELM design tokens — single source of truth for color, type, spacing,
   motion, and elevation. Every HELM surface (landing, sign-in, dashboard,
   reports, emails) imports from here. Updates ship system-wide. */

:root {
  /* ─── COLOR — NAVY (the operator) ─────────────────────── */
  --navy-50:  #E8ECF4;
  --navy-100: #C4CDDF;
  --navy-200: #9CABC9;
  --navy-300: #7388B2;
  --navy-400: #4F6B9D;
  --navy-500: #2E4F84;   /* brand mid */
  --navy-600: #1A3865;
  --navy-700: #0F2A4D;
  --navy-800: #0A1F3D;   /* primary brand navy — backgrounds, headlines */
  --navy-900: #06152A;
  --navy-950: #03091A;

  /* ─── COLOR — BRASS (the wealth) ──────────────────────── */
  --brass-50:  #FAF4E5;
  --brass-100: #F2E5C2;
  --brass-200: #E9D49C;
  --brass-300: #DFC274;
  --brass-400: #D0AE5C;
  --brass-500: #B8995E;   /* primary brand brass — accents, CTAs */
  --brass-600: #9A7E47;
  --brass-700: #7A6336;
  --brass-800: #594827;
  --brass-900: #3B2F18;

  /* ─── COLOR — IVORY (the page) ────────────────────────── */
  --ivory-50:  #FBF9F4;
  --ivory-100: #F8F4EC;   /* primary brand ivory — body bg on light surfaces */
  --ivory-200: #EFE9DA;
  --ivory-300: #E0D9C5;

  /* ─── SEMANTIC ROLES ──────────────────────────────────── */
  --bg-default:      var(--navy-800);
  --bg-raised:       var(--navy-700);
  --bg-sunken:       var(--navy-900);
  --bg-canvas:       var(--ivory-100);
  --surface-glass:   rgba(248, 244, 236, 0.04);
  --surface-glass-2: rgba(248, 244, 236, 0.07);

  --text-primary:    var(--ivory-100);
  --text-secondary:  rgba(248, 244, 236, 0.75);
  --text-tertiary:   rgba(248, 244, 236, 0.55);
  --text-faint:      rgba(248, 244, 236, 0.40);
  --text-on-light:   var(--navy-800);
  --text-on-light-2: rgba(10, 31, 61, 0.70);

  --accent:          var(--brass-500);
  --accent-bright:   var(--brass-300);
  --accent-deep:     var(--brass-700);

  --rule:            rgba(248, 244, 236, 0.08);
  --rule-strong:     rgba(248, 244, 236, 0.16);
  --rule-light:      rgba(10, 31, 61, 0.10);
  --rule-light-2:    rgba(10, 31, 61, 0.18);

  --pos:             #2F8A4D;   /* gains */
  --neg:             #C7434B;   /* losses */
  --warn:            #D89343;   /* attention */
  --info:            var(--brass-300);

  /* ─── TYPE ────────────────────────────────────────────── */
  --font-display:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif:      'Source Serif Pro', 'Iowan Old Style', Georgia, serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-72: 72px;
  --fs-96: 96px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;

  /* Tracking — display headlines tighten, mono labels expand */
  --tk-display: -0.022em;
  --tk-tight:   -0.012em;
  --tk-base:    -0.003em;
  --tk-loose:   0.04em;
  --tk-eyebrow: 0.16em;

  /* ─── SPACING (4px grid) ──────────────────────────────── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;
  --sp-13: 128px; --sp-14: 160px; --sp-15: 200px;

  /* ─── RADIUS ──────────────────────────────────────────── */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; --r-pill: 999px;

  /* ─── ELEVATION (shadows tuned for navy bg) ───────────── */
  --shadow-1: 0 1px 2px rgba(3,9,26,0.4);
  --shadow-2: 0 4px 12px rgba(3,9,26,0.5), 0 1px 2px rgba(3,9,26,0.3);
  --shadow-3: 0 12px 32px rgba(3,9,26,0.55), 0 2px 6px rgba(3,9,26,0.35);
  --shadow-4: 0 24px 64px rgba(3,9,26,0.65), 0 4px 12px rgba(3,9,26,0.4);
  --glow-brass: 0 0 0 1px rgba(184,153,94,0.30), 0 8px 24px rgba(184,153,94,0.18);

  /* ─── MOTION ──────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 380ms;
  --t-deliberate: 600ms;
}

/* ─── RESETS + BASELINE ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { margin: 0; font-family: var(--font-display); color: var(--text-primary); background: var(--bg-default); line-height: var(--lh-base); font-feature-settings: 'cv11', 'ss01', 'ss03'; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ─── UTILITY: SR-ONLY ────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ─── UTILITY: SKIP-LINK ──────────────────────────────── */
.skip-link { position: absolute; top: -48px; left: 12px; background: var(--brass-500); color: var(--navy-900); padding: 10px 18px; border-radius: var(--r-md); z-index: 9999; font-weight: 700; transition: top var(--t-base) var(--ease-out); }
.skip-link:focus { top: 12px; }

/* ─── UTILITY: REDUCED MOTION ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ─── ETHEREAL BACKDROP — subtle aurora used on hero/sign-in */
.helm-aurora {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.helm-aurora::before, .helm-aurora::after {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
  width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: 0.55;
}
.helm-aurora::before {
  top: -20vmax; left: -10vmax;
  background: radial-gradient(circle, rgba(184,153,94,0.25), transparent 65%);
  animation: helm-drift-a 24s var(--ease-io) infinite alternate;
}
.helm-aurora::after {
  bottom: -25vmax; right: -15vmax;
  background: radial-gradient(circle, rgba(46,79,132,0.45), transparent 65%);
  animation: helm-drift-b 30s var(--ease-io) infinite alternate;
}
@keyframes helm-drift-a { from { transform: translate(0,0); } to { transform: translate(8vmax, 6vmax); } }
@keyframes helm-drift-b { from { transform: translate(0,0); } to { transform: translate(-6vmax, -4vmax); } }

/* ─── BRAND LOCKUP (inline SVG-style mark + wordmark) ─── */
.helm-lockup { display: inline-flex; align-items: center; gap: 12px; }
.helm-lockup-mark { width: 36px; height: 36px; flex-shrink: 0; }
.helm-lockup-name {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  color: var(--ivory-100); letter-spacing: 0.14em;
}
.helm-lockup-sub {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  color: var(--brass-500); letter-spacing: 0.22em; text-transform: uppercase;
  margin-left: 6px;
}
.helm-lockup--light .helm-lockup-name { color: var(--navy-800); }

/* ─── PRIMARY CTA ─────────────────────────────────────── */
.helm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-13);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 14px 26px; border-radius: var(--r-md);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-base);
  cursor: pointer; white-space: nowrap;
}
.helm-btn--primary { background: var(--brass-500); color: var(--navy-900); box-shadow: var(--shadow-2); }
.helm-btn--primary:hover { background: var(--brass-300); transform: translateY(-1px); box-shadow: var(--glow-brass); }
.helm-btn--ghost { background: transparent; color: var(--ivory-100); border: 1px solid var(--rule-strong); }
.helm-btn--ghost:hover { border-color: var(--brass-500); color: var(--brass-300); }

/* ─── EYEBROW LABEL ───────────────────────────────────── */
.helm-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  color: var(--brass-500); letter-spacing: var(--tk-eyebrow); text-transform: uppercase;
}
.helm-eyebrow::before {
  content: ''; width: 22px; height: 1px; background: var(--brass-500); display: inline-block;
}

/* ─── FOCUS RINGS (accessible) ────────────────────────── */
:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 3px; border-radius: 4px; }