/* =====================================================================
   ADPANDA — TOKEN SYSTEM
   Source of truth: Juno, /home/mdalton/Documents/Juno/adpanda-strategy-2026-08-17.md
   Ruling 4 (colour + type), Ruling 5 (the mark), Ruling 7 (CTA hierarchy).

   Every value the build uses lives here as a CSS custom property. No page
   in this system hardcodes a colour, a type size, a space or a motion
   duration — see SYSTEM.md for the rule this enforces and why.

   Self-hosted fonts only. No CDN reference at runtime — the two files in
   ./fonts were fetched once and are served from this origin. See SYSTEM.md
   "Fonts" for exactly what was fetched and what was left out, honestly.
   ===================================================================== */

/* ---------------------------------------------------------------------
   FONTS — self-hosted, variable, latin subset only (see SYSTEM.md)
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/fraunces-variable-latin.woff2") format("woff2-variations"),
       url("./fonts/fraunces-variable-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Sans";
  src: url("./fonts/geist-variable-latin.woff2") format("woff2-variations"),
       url("./fonts/geist-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------------------------------------------------------------------
     COLOUR — Ruling 4. Base is warm achromatic paper, not screen-white.
     Gold is the ONLY chromatic token and is reserved for the primary
     CTA — see the three colour rules below and SYSTEM.md.
     ------------------------------------------------------------------- */

  /* Base */
  --color-bg:              #FAFAF8;
  --color-surface:         #FFFFFF;
  --color-surface-alt:     #F1F0EC;
  --color-border:          #E2E1DC;
  --color-border-strong:   #C9C7C0;

  /* Ink */
  --color-ink:             #111113;
  --color-ink-muted:       #5A5A61;
  --color-ink-subtle:      #8A8A92;

  /* Inverse (full-bleed dark sections) */
  --color-inverse-bg:      #111113;
  --color-inverse-surface: #1C1C1F;
  --color-inverse-ink:     #FAFAF8;
  --color-inverse-muted:   #A5A5AC;
  --color-inverse-border:  #2E2E33;

  /* Accent — gold. Reserved for the primary CTA. See rule 1 below. */
  --color-accent:          #E0A32E;
  --color-accent-hover:    #C78A1C;
  --color-accent-active:   #A97314;
  --color-accent-ink:      #111113;
  --color-accent-quiet:    #FBF3E2;

  /* Semantic */
  --color-success:         #1F7A4D;
  --color-success-quiet:   #E6F2EC;
  --color-error:           #B3261E;
  --color-error-quiet:     #FBEAE8;

  /* Focus — deliberately NOT the accent (Ruling 4, rule 3) */
  --color-focus:           #1A5FD6;

  /* -------------------------------------------------------------------
     TYPE
     ------------------------------------------------------------------- */
  --font-display: "Fraunces", "Newsreader", Georgia, serif;
  --font-body:    "Geist Sans", "Inter", system-ui, -apple-system, sans-serif;

  --text-hero:  clamp(2.75rem, 6vw, 5rem);
  --text-h1:    clamp(2.25rem, 4.5vw, 3.5rem);
  --text-h2:    clamp(1.75rem, 3vw, 2.5rem);
  --text-h3:    1.5rem;
  --text-lead:  1.25rem;
  --text-body:  1.0625rem;
  --text-small: 0.9375rem;
  --text-label: 0.8125rem;

  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-body:    1.6;

  --weight-display:      400;
  --weight-display-bold: 600;
  --weight-body:         400;
  --weight-body-medium:  500;
  --weight-body-bold:    600;

  --measure: 68ch;

  /* -------------------------------------------------------------------
     SPACE / RADIUS / SHADOW / MOTION
     ------------------------------------------------------------------- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem;  --space-8: 2rem;    --space-12: 3rem;  --space-16: 4rem;
  --space-24: 6rem;   --space-32: 8rem;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(17 17 19 / .06);
  --shadow-md: 0 4px 16px rgb(17 17 19 / .08);
  --shadow-lg: 0 12px 40px rgb(17 17 19 / .10);

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 400ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* =====================================================================
   RESET / BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }

/* Visible focus everywhere, on the focus token — never the accent. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* =====================================================================
   TYPE UTILITIES
   ===================================================================== */
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: -0.01em;
}
.display--bold { font-weight: var(--weight-display-bold); }
.text-hero { font-size: var(--text-hero); }
.text-h1   { font-size: var(--text-h1); line-height: var(--leading-heading); }
.text-h2   { font-size: var(--text-h2); line-height: var(--leading-heading); }
.text-h3   {
  font-size: var(--text-h3);
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  line-height: var(--leading-heading);
}
.lead      { font-size: var(--text-lead); color: var(--color-ink-muted); max-width: var(--measure); }
.body-copy { font-size: var(--text-body); max-width: var(--measure); }
.label {
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-subtle);
  font-weight: var(--weight-body-medium);
}
.on-ink .lead      { color: var(--color-inverse-muted); }
.on-ink .label     { color: var(--color-inverse-muted); }

/* =====================================================================
   LAYOUT
   ===================================================================== */
.section       { padding-block: var(--space-32); }
.section--tight{ padding-block: var(--space-24); }
.section--paper{ background: var(--color-bg); color: var(--color-ink); }
.section--surface-alt{ background: var(--color-surface-alt); color: var(--color-ink); }
.section--ink {
  background: var(--color-inverse-bg);
  /* The one permitted non-flat fill (Ruling 4): a barely-perceptible
     vertical tint so a large flat black doesn't band on cheap panels.
     If it reads as a gradient, it's wrong — it should be invisible. */
  background-image: linear-gradient(to bottom, #131316 0%, #0F0F11 100%);
  color: var(--color-inverse-ink);
}
.container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 640px) { .container { padding-inline: var(--space-8); } }

/* =====================================================================
   BUTTONS — CTA hierarchy, Ruling 7.
   Gold fill is reserved for the PRIMARY CTA only. No other element in
   this system may use --color-accent as a fill. That rule is what makes
   the hierarchy self-enforcing — see SYSTEM.md.
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--text-body);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease),
              box-shadow var(--motion-fast) var(--ease),
              background-color var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease);
}
.btn:active { transform: translateY(0); }

/* Primary — the ONLY gold-fill element on any page. */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn--primary:active { background: var(--color-accent-active); }

/* Secondary — near-black outline. No fill, no gold. */
.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover { border-color: var(--color-ink); transform: translateY(-1px); }
.on-ink .btn--secondary { color: var(--color-inverse-ink); border-color: var(--color-inverse-border); }
.on-ink .btn--secondary:hover { border-color: var(--color-inverse-ink); }

/* Tertiary — underlined text link. No box at all. */
.btn--tertiary {
  padding: var(--space-1) 0;
  border-radius: 0;
  background: none;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-strong);
}
.btn--tertiary:hover { text-decoration-color: currentColor; }
.on-ink .btn--tertiary { color: var(--color-inverse-ink); text-decoration-color: var(--color-inverse-border); }

/* Passive — inline text CTA, smallest weight in the hierarchy. */
.btn--passive {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =====================================================================
   MOTION — vocabulary shared by every page. See SYSTEM.md for what each
   effect carries and where it is used. All of it is disabled under
   prefers-reduced-motion; JS additionally never arms it when the media
   query matches. This block is the CSS-side belt to that JS-side brace.
   ===================================================================== */

/* Global safety net: nothing on this site holds a running animation past
   a user's stated preference, even one this file forgot to gate. */
@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;
  }
}

/* Reveal-on-scroll. Progressive enhancement: an element only enters the
   hidden "prepared" state if `.js` is present on <html> (set by a script
   at the top of <body>, so it never applies with JS off) AND the OS is
   not asking for reduced motion. Without JS, or with reduced motion,
   every [data-reveal] element is simply visible from first paint. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    transition: opacity var(--motion-slow) var(--ease),
                transform var(--motion-slow) var(--ease);
  }
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Sticky header: fades in a solid backing once the hero has scrolled
   past. Carries information — "you have moved past the intro, the
   primary action is still one tap away." Instant under reduced motion. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .site-header {
    transition: background-color var(--motion-base) var(--ease),
                border-color var(--motion-base) var(--ease);
  }
}
.site-header.is-scrolled {
  background: rgb(250 250 248 / 0.92);
  border-bottom-color: var(--color-border);
  backdrop-filter: saturate(140%) blur(8px);
}

/* Methodology rail — the progress fill that answers "where in the
   sequence am I." Value is written by JS as --progress (0..1); CSS-only
   fallback (JS off) shows the rail fully lit, since with no script there
   is no scroll-tracking to represent and a dim, static bar would read as
   a fault rather than a feature. */
.rail {
  --progress: 1;
  position: relative;
  background: var(--color-inverse-border);
  border-radius: var(--radius-full);
}
.rail::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-accent);
  transform-origin: left top;
  transform: scaleX(var(--progress));
}
@media (prefers-reduced-motion: no-preference) {
  .rail::before { transition: transform var(--motion-base) var(--ease); }
}
@media (min-width: 800px) {
  .rail { --progress: 1; }
  .rail::before { transform-origin: top left; transform: scaleY(var(--progress)); }
}

.step {
  opacity: 0.45;
  transition: none;
}
.js .step {
  opacity: 0.45;
}
@media (prefers-reduced-motion: no-preference) {
  .js .step { transition: opacity var(--motion-base) var(--ease); }
}
.js .step.is-active { opacity: 1; }