/* ─────────────────────────────────────────────────────────────────
   Semanti — Colors & Type
   Import first. Everything else builds on these tokens.
   ───────────────────────────────────────────────────────────────── */

/* Fonts — self-hosted (variable TTFs in ./fonts) */
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Variable.ttf") format("truetype-variations"),
       url("fonts/Satoshi-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-VariableItalic.ttf") format("truetype-variations"),
       url("fonts/Satoshi-VariableItalic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/WorkSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/WorkSans-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Raw palette ─────────────────────────────────────────────── */
  --ink:            #161615;   /* Primary dark — page bgs, body on light   */
  --ink-2:          #242021;   /* Secondary dark — section contrast        */
  --slate:          #2F3A3E;   /* Deep slate — alt dark, muted on light    */
  --sand:           #E0D7D2;   /* Primary light — bgs, text on dark        */
  --bone:           #FCF9F7;   /* Lightest — elevated surfaces, paper      */
  --muted:          #7A7D6D;   /* Borders, tertiary text                   */
  --ember:          #D27148;   /* Primary accent — CTA, signal ONLY        */
  --amber:          #E1B37D;   /* Secondary accent — gradient, warm        */

  /* ── Semantic color tokens ───────────────────────────────────── */
  --fg-1:           var(--ink);       /* primary text on light            */
  --fg-2:           var(--slate);     /* secondary text on light          */
  --fg-3:           var(--muted);     /* tertiary text, meta              */
  --fg-inverse-1:   var(--sand);      /* primary text on dark             */
  --fg-inverse-2:   rgba(224,215,210,0.72);  /* secondary text on dark    */
  --fg-inverse-3:   var(--muted);     /* tertiary on dark                 */

  --bg-page:        var(--sand);
  --bg-surface:     var(--sand);
  --bg-dark:        var(--ink);
  --bg-dark-2:      var(--ink-2);

  --border-on-light: rgba(122,125,109,0.25);
  --border-on-dark:  rgba(224,215,210,0.20);

  --accent:         var(--ember);
  --accent-hover:   #BD6340;          /* ember -10% L */
  --accent-2:       var(--amber);

  --focus-ring:     var(--ember);

  /* ── Signature gradient — warm→sand conic ────────────────────── */
  --gradient-signature: conic-gradient(
    from 180deg at 50% 50%,
    var(--muted) 0%,
    var(--ember) 7%,
    var(--amber) 34%,
    var(--muted) 87%,
    var(--sand) 100%
  );

  /* ── Typography — families ───────────────────────────────────── */
  --font-display: "Satoshi", "Satoshi Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    "Work Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ── Typography — weights ────────────────────────────────────── */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* ── Typography — scale ──────────────────────────────────────── */
  --fs-hero:    clamp(2.5rem, 6vw, 5.5rem);     /* 40 → 88       */
  --fs-h1:      clamp(2rem, 4.5vw, 3.75rem);    /* 32 → 60       */
  --fs-h2:      clamp(1.75rem, 3.2vw, 3rem);    /* 28 → 48       */
  --fs-h3:      clamp(1.375rem, 2.2vw, 2rem);   /* 22 → 32       */
  --fs-lead:    clamp(1.125rem, 1.4vw, 1.375rem); /* 18 → 22     */
  --fs-body:    1rem;                            /* 16            */
  --fs-small:   0.875rem;                        /* 14            */
  --fs-meta:    0.75rem;                         /* 12            */

  --lh-display: 1.05;
  --lh-tight:   1.15;
  --lh-body:    1.6;
  --lh-meta:    1.4;

  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-meta:    0.02em;

  /* ── Spacing (8pt grid) ──────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;
  --sp-9:  128px;
  --sp-10: 160px;
  --sp-11: 200px;

  /* ── Layout ──────────────────────────────────────────────────── */
  --max-content:    1280px;
  --max-wrapper:    1440px;
  --max-paragraph:  60ch;
  --gutter:         clamp(24px, 5vw, 96px);

  /* ── Radii (almost always 0) ─────────────────────────────────── */
  --radius-0:  0;
  --radius-1:  2px;   /* CTA button only */

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-out:       cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:       150ms;
  --dur-base:       400ms;

  /* ── Z ───────────────────────────────────────────────────────── */
  --z-nav:     50;
  --z-modal:  100;
}

/* ── Semantic element defaults ─────────────────────────────────── */
html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-page); }
body { font-size: var(--fs-body); line-height: var(--lh-body); }

h1, .h1, .hero {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.lead {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--fg-2);
  max-width: var(--max-paragraph);
  margin: 0;
}
p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--max-paragraph);
  margin: 0;
  text-wrap: pretty;
}
.meta, small {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-meta);
  text-transform: none;
  color: var(--fg-3);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}