/* ============================================================
   CONSIG · DESIGN TOKENS · v3.0
   ============================================================ */

/* ===== FORZA (display caps) — Hoefler & Co., licensed ===== */
@font-face { font-family: "Forza"; src: url("fonts/Forza-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Forza"; src: url("fonts/Forza-Book.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Forza"; src: url("fonts/Forza-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Forza"; src: url("fonts/Forza-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Forza"; src: url("fonts/Forza-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ===== CORE PALETTE ===== */
  --color-navy:        #003057;
  --color-cyan:        #00AEC7;
  --color-orange:      #DC582A;
  --color-yellow:      #F0B323;
  --color-gray:        #53565A;
  --color-mist:        #D9D9D6;

  --color-risk:        var(--color-orange);
  --color-risk-soft:   var(--orange-100);
  --color-risk-ink:    var(--orange-700);
  --color-ink:         #0E1419;
  --color-paper:       #FFFFFF;
  --color-bone:        #F6F5F1;

  /* ===== NAVY SCALE ===== */
  --navy-100: #E5EEF4;
  --navy-300: #B7CCDC;
  --navy-500: #1A6093;
  --navy-700: #003F70;
  --navy-900: #001A33;

  /* ===== CYAN SCALE ===== */
  --cyan-100: #DCF3F7;
  --cyan-300: #9CDFE9;
  --cyan-500: #00AEC7;
  --cyan-700: #0083A0;
  --cyan-900: #005A6F;

  /* ===== ORANGE SCALE ===== */
  --orange-100: #FBE4D9;
  --orange-300: #F0B499;
  --orange-500: #DC582A;
  --orange-700: #B0451E;
  --orange-900: #7A2E0F;

  /* ===== YELLOW SCALE ===== */
  --yellow-100: #FCEFCE;
  --yellow-300: #F8D880;
  --yellow-500: #F0B323;
  --yellow-700: #B98818;
  --yellow-900: #5E460C;

  /* ===== GRAY SCALE ===== */
  --gray-100: #EAEAE7;
  --gray-300: #BFC2C5;
  --gray-500: #53565A;
  --gray-700: #31373D;
  --gray-900: #0E1419;

  /* ===== GRADIENTS ===== */
  --gradient-cyan:     linear-gradient(180deg, #008CA0 0%, #00ADC6 100%);
  --gradient-orange:   linear-gradient(180deg, #DC5829 0%, #EEB221 100%);
  --gradient-yellow:   linear-gradient(180deg, #EEB221 0%, #DC5829 100%);
  --gradient-frame:    radial-gradient(circle at 50% 50%, #888 0%, #D3D3D2 100%);
  --gradient-navy:     linear-gradient(145deg, #003057 0%, #001A33 100%);
  --gradient-trust:    linear-gradient(145deg, #003057, #00AEC7);
  --gradient-velocity: linear-gradient(145deg, #00AEC7, #F0B323);
  --gradient-edge:     linear-gradient(145deg, #DC582A, #F0B323);

  /* ===== TYPOGRAPHY ===== */
  --font-display:      "Oxanium", system-ui, sans-serif;
  --font-display-caps: "Forza", "Oxanium", system-ui, sans-serif;
  --font-body:         "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono:         "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display:   72px;  --lh-display: 80px; --ls-display: -2px;
  --fs-h1:        48px;  --lh-h1:      56px; --ls-h1:      -1px;
  --fs-h2:        32px;  --lh-h2:      40px; --ls-h2:      -0.5px;
  --fs-h3:        20px;  --lh-h3:      28px; --ls-h3:       0;
  --fs-body:      16px;  --lh-body:    24px; --ls-body:     0;
  --fs-caption:   12px;  --lh-caption: 16px; --ls-caption:  0.5px;

  /* ===== SPACING ===== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ===== RADIUS ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ===== ELEVATION ===== */
  --shadow-sm:   0 1px 2px rgba(14,20,25,.06), 0 1px 1px rgba(14,20,25,.04);
  --shadow-md:   0 4px 12px rgba(14,20,25,.08), 0 2px 4px rgba(14,20,25,.04);
  --shadow-lg:   0 12px 32px rgba(14,20,25,.12), 0 4px 8px rgba(14,20,25,.06);
  --shadow-navy: 0 12px 40px rgba(0,48,87,.18);

  /* ===== MOTION ===== */
  --ease-standard: cubic-bezier(.2,.0,.0,1);
  --ease-snap:     cubic-bezier(.4,.0,.2,1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;
}

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.t-display, .t-h1, .t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: none;
}
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-h1      { font-size: var(--fs-h1);      line-height: var(--lh-h1);      letter-spacing: var(--ls-h1); }
.t-h2      { font-size: var(--fs-h2);      line-height: var(--lh-h2);      letter-spacing: var(--ls-h2); }
.t-h3      { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.t-body    { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); }
.t-caption { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); text-transform: uppercase; }
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-gray);
}

.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  padding: 14px 22px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background var(--dur-fast) var(--ease-snap),
              transform var(--dur-fast) var(--ease-snap);
}
.btn-primary   { background: var(--color-navy);   color: #fff; }
.btn-primary:hover   { background: var(--navy-700); }
.btn-secondary { background: transparent; color: var(--color-navy); box-shadow: inset 0 0 0 1.5px var(--color-navy); }
.btn-secondary:hover { background: var(--navy-100); }