/* ============================================================
   MURMUR — FOUNDATION TOKENS
   "Play that plays back."
   Imported by every section. Edit here, change everywhere.
   ============================================================ */

/* ---- Fonts ------------------------------------------------- */
/* Display: Hanken Grotesk — geometric-humanist, confident.
   Body:    Spectral — a warmer, lightly literary face.
   Two working weights per role; nothing more. Lean on purpose. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700&family=Spectral:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* ---- Color: the four-color discipline -------------------- */
  /* Base + surface are the whole world. Reward colors stay
     locked away until the visitor EARNS them by interacting.   */
  --indigo:        #20234D;   /* Dusk indigo  — dominant base   */
  --bone:          #F4EFE6;   /* Bone         — dominant light  */
  --ember:         #F2654E;   /* Ember coral  — REWARD only     */
  --cyan:          #19B7C2;   /* Signal cyan  — REWARD only     */

  /* Derived shades — same temperature, never new hues. */
  --indigo-deep:   #181A3A;   /* deeper dusk, for layering      */
  --indigo-lift:   #2B2F63;   /* a half-step up from base       */
  --indigo-line:   color-mix(in srgb, var(--bone) 14%, transparent); /* hairlines on indigo */
  --bone-dim:      color-mix(in srgb, var(--bone) 64%, transparent); /* muted bone text     */
  --bone-faint:    color-mix(in srgb, var(--bone) 48%, transparent); /* captions / labels   */

  /* Semantic roles — write meaning, not color, in components. */
  --paper:         var(--indigo);   /* default canvas           */
  --ink:           var(--bone);     /* default text             */
  --ink-soft:      var(--bone-dim);
  --ink-faint:     var(--bone-faint);
  --reward-warm:   var(--ember);
  --reward-cool:   var(--cyan);

  /* ---- Type families -------------------------------------- */
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Spectral', Georgia, 'Times New Roman', serif;

  /* ---- Fluid type scale (mobile-first) -------------------- */
  /* clamp(min @360px, fluid, max @1280px). Huge & confident at
     the top; quiet & legible at the base. Never below 16px.    */
  --step-mono:  0.78rem;                                  /* eyebrow / mono labels */
  --step--1:    clamp(0.92rem, 0.88rem + 0.18vw, 1.02rem);/* fine print            */
  --step-0:     clamp(1.06rem, 1.00rem + 0.30vw, 1.25rem);/* body                  */
  --step-1:     clamp(1.30rem, 1.18rem + 0.55vw, 1.65rem);/* lead body             */
  --step-2:     clamp(1.62rem, 1.40rem + 0.95vw, 2.30rem);/* sub-head              */
  --step-3:     clamp(2.05rem, 1.65rem + 1.75vw, 3.30rem);/* head                  */
  --step-4:     clamp(2.65rem, 1.95rem + 3.05vw, 4.90rem);/* display               */
  --step-5:     clamp(3.40rem, 2.20rem + 5.25vw, 7.20rem);/* hero                  */
  --step-6:     clamp(4.20rem, 2.30rem + 8.30vw, 10.5rem);/* full-bleed statement  */

  /* ---- Spacing scale -------------------------------------- */
  --space-1:  0.375rem;
  --space-2:  0.625rem;
  --space-3:  1rem;
  --space-4:  1.5rem;
  --space-5:  2.25rem;
  --space-6:  3.25rem;
  --space-7:  4.75rem;
  --space-8:  6.75rem;
  --space-9:  9.5rem;

  /* ---- Form ----------------------------------------------- */
  --radius:      4px;     /* restrained. durability is discipline */
  --radius-pill: 999px;
  --hairline:    1px;
  --tap-min:     44px;    /* minimum interactive target          */
  --measure:     34ch;    /* comfortable reading width           */

  /* ---- Motion --------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-soft: cubic-bezier(0.40, 0.00, 0.20, 1);
  --dur-1: 180ms;
  --dur-2: 420ms;
  --dur-3: 900ms;
}

/* ============================================================
   BASE RESET — quiet, accessible defaults
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; max-width: var(--measure); text-wrap: pretty; }

a { color: inherit; }

/* Eyebrow / mono label — used to caption sections. */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Visible focus — accessibility is brand-true. */
:focus-visible {
  outline: 2px solid var(--reward-cool);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Screen-reader-only utility. */
.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;
}

/* Every interactive target meets the floor. */
button, a.btn, .tap {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
}

/* ============================================================
   REDUCED-MOTION SCAFFOLDING
   The murmuration (built later) must read this and fall still.
   Components also key off [data-motion="reduced"] on <html>.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}