/* =====================================================================
   Horizon Design System — Core tokens
   design for dissemination
   ===================================================================== */

/* -------- Fonts ------------------------------------------------------ */

@font-face {
  font-family: "PP Formula";
  src: url("fonts/PPFormula-Extrabold.otf") format("opentype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Formula";
  src: url("fonts/PPFormula-SemiCondensedMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-stretch: 87.5%;
  font-display: swap;
}

@font-face {
  font-family: "PP Formula";
  src: url("fonts/PPFormula-NarrowSemibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-stretch: 75%;
  font-display: swap;
}

/* Substitute source for PP Formula — only used where PP Formula is missing.
   Inter is the running-body typeface used across web screens in Figma. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

/* -------- Color tokens ---------------------------------------------- */
:root {
  /* Brand palette (from Figma metadata, most used) */
  --horizon-blue:        #3761DF;   /* primary brand — electric cobalt */
  --horizon-blue-deep:   #173077;   /* deep navy, for dark surfaces */
  --horizon-blue-ink:    #102054;   /* ink/near-navy */
  --horizon-teal:        #00AD94;   /* action / CTA teal */
  --horizon-teal-deep:   #08968C;   /* darker teal for accents */
  --horizon-yellow:      #F2EC50;   /* signature highlight yellow */
  --horizon-yellow-warm: #FFEB3D;
  --horizon-orange:      #FFA62C;   /* warning / secondary accent */
  --horizon-red:         #FF000F;   /* alert / emphasis */
  --horizon-cyan:        #56E7FA;   /* diagram accent */

  /* Neutrals */
  --horizon-black:       #000000;
  --horizon-ink:         #212121;
  --horizon-graphite:    #545558;
  --horizon-gray-70:     #575757;
  --horizon-gray-40:     #A8A8A8;
  --horizon-gray-20:     #D9D9D9;
  --horizon-gray-10:     #F6F6F6;   /* default page backdrop */
  --horizon-white:       #FFFFFF;

  /* Semantic assignments */
  --bg-page:       var(--horizon-white);
  --bg-soft:       var(--horizon-gray-10);
  --bg-ink:        var(--horizon-blue-deep);
  --bg-accent:     var(--horizon-yellow);
  --bg-cta:        var(--horizon-teal);

  --fg-primary:    var(--horizon-black);
  --fg-inverse:    var(--horizon-white);
  --fg-muted:      var(--horizon-gray-70);
  --fg-link:       var(--horizon-blue);
  --fg-brand:      var(--horizon-blue);

  --border-subtle: var(--horizon-gray-20);
  --border-strong: var(--horizon-black);

  /* Radius — Horizon uses either 0 (hard-edged) or fully pill. Cards on web use ~8px. */
  --radius-none:   0;
  --radius-card:   8px;
  --radius-pill:   999px;

  /* Elevation — Horizon is largely shadow-less; edges are defined by color blocks.
     The few shadows that appear are soft and short. */
  --shadow-none:   none;
  --shadow-soft:   0 2px 14px rgba(16, 32, 84, 0.08);
  --shadow-card:   0 4px 24px rgba(16, 32, 84, 0.12);

  /* Spacing — 8pt grid with a generous 24/32/48/96 rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Type families */
  --font-display: "PP Formula", "Clash Grotesk", "Archivo Black", "Arial Black", system-ui, sans-serif;
  --font-body:    "Inter", "PP Formula", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Type scale — display-heavy, tight leading, no letter-spacing */
  --fs-hero:    150px;  /* section-intro huge headline */
  --fs-xxl:     96px;   /* poster headline */
  --fs-xl:      75px;   /* page title */
  --fs-lg:      48px;
  --fs-md:      32px;
  --fs-base:    20px;
  --fs-sm:      16px;
  --fs-xs:      12px;

  --lh-tight:   1.0;
  --lh-snug:    1.15;
  --lh-body:    1.5;
}

/* -------- Base reset & typographic defaults ------------------------- */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display type lives in PP Formula — big, tight, black-weight */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--fg-primary);
}

h1 { font-size: clamp(48px, 8vw, var(--fs-xl)); }
h2 { font-size: clamp(36px, 5vw, var(--fs-lg)); }
h3 { font-size: var(--fs-md); }

h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

p, li { margin: 0; }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* -------- Utility classes ------------------------------------------- */

.highlight-yellow {
  background: var(--horizon-yellow);
  padding: 0.02em 0.18em 0.06em;
  color: var(--horizon-black);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--horizon-teal);
}

.rule {
  height: 2px;
  width: 100%;
  background: var(--fg-primary);
  border: 0;
}