/* =========================================================
   GLOBAL — Design Tokens
   Single source of truth: color, motion, layout, and the
   hamburger menu reveal geometry. Loaded first on every page.
   ========================================================= */

:root {
  /* Brand color */
  --pr-paper: #f4f1ea;
  --pr-ink: #111111;
  --pr-graphite: #171717;
  --pr-concrete: #9a968e;
  --pr-line: #d8d2c6;
  --pr-rocket: #e3006d;
  --pr-lime: #aed107; /* lime green accent */
  --pr-rocket-soft: #eb9fbe;
  --pr-lime-soft: #dbe77d;
  --pr-graphite-soft: #1d1c1a;

  /* Semantic color */
  --color-bg: var(--page-bg);
  --color-fg: var(--page-fg);
  --color-surface: color-mix(in srgb, var(--page-fg), transparent 88%);
  --color-surface-soft: color-mix(in srgb, var(--page-fg), transparent 93%);
  --color-border: color-mix(in srgb, var(--page-fg), transparent 84%);
  --color-border-strong: color-mix(in srgb, var(--page-fg), transparent 70%);
  --color-muted: color-mix(in srgb, currentColor, transparent 38%);
  --color-muted-strong: color-mix(in srgb, currentColor, transparent 26%);
  --color-accent: var(--pr-rocket);
  --color-accent-alt: var(--pr-lime);

  /* Runtime theme (driven by main.js section themes) */
  --page-bg: var(--pr-paper);
  --page-fg: var(--pr-ink);
  --header-fg: var(--pr-ink);
  --theme-bg-paper: var(--pr-paper);
  --theme-bg-dark: var(--pr-graphite-soft);
  --theme-bg-rocket: var(--pr-rocket-soft);
  --theme-bg-lime: var(--pr-lime-soft);

  /* Typography */
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-display-default: "Bricolage Grotesque", sans-serif;
  --font-display-staatliches: "Staatliches", sans-serif;
  --font-display-bowlby: "Bowlby One", sans-serif;
  --font-display-boldonse: "Boldonse", sans-serif;
  --font-display: var(--font-display-default);

  --type-hero: clamp(3.7rem, 8.3vw, 9.2rem);
  --type-page-hero: clamp(3rem, 9vw, 9rem);
  --type-super: clamp(3.4rem, 11vw, 10rem);
  --type-section: clamp(3rem, 6vw, 6.4rem);
  --type-section-sm: clamp(2rem, 5vw, 4.4rem);
  --type-heading-lg: clamp(2.4rem, 5.2vw, 5.7rem);
  --type-heading-md: clamp(1.6rem, 3.6vw, 3rem);
  --type-heading-sm: clamp(1.15rem, 1.6vw, 1.5rem);
  --type-card: clamp(1.45rem, 2.4vw, 2.7rem);
  --type-card-sm: clamp(1.1rem, 1.6vw, 1.4rem);
  --type-lede: clamp(1.05rem, 1.8vw, 1.35rem);
  --type-body-lg: clamp(1.05rem, 1.5vw, 1.3rem);
  --type-body: 1rem;
  --type-small: 0.95rem;
  --type-micro: 12px;
  --type-tiny: 11px;

  --leading-display-tight: 0.86;
  --leading-display: 0.94;
  --leading-heading: 1;
  --leading-body: 1.6;
  --leading-body-tight: 1.5;

  --tracking-display-tight: -0.065em;
  --tracking-display: -0.05em;
  --tracking-heading: -0.04em;
  --tracking-heading-soft: -0.03em;
  --tracking-none: 0;
  --tracking-kicker: 0.18em;
  --tracking-meta: 0.16em;
  --tracking-button: 0.14em;
  --tracking-ui: 0.08em;

  /* Radius
     Use these instead of one-off pixel values. Pick by purpose first, then
     by size only when a section needs a clearly different surface. */
  --radius-mark: 0.1em;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-3xl: 16px;
  --radius-hero: 18px;
  --radius-pill: 999px;

  --radius-button: var(--radius-pill);
  --radius-control: var(--radius-lg);
  --radius-card: var(--radius-md);
  --radius-card-soft: var(--radius-xl);
  --radius-media: var(--radius-xl);
  --radius-media-soft: var(--radius-media);
  --radius-media-large: var(--radius-media);
  --radius-focus: calc(var(--radius-media) + 2px);

  /* Spacing */
  --space-page-x: 24px;
  --space-page-x-tablet: 32px;
  --space-page-x-desktop: 48px;
  --space-section-y: 128px;
  --space-section-y-tight: 72px;
  --space-section-y-loose: clamp(120px, 18vh, 220px);
  --space-section-y-after-pin: clamp(176px, 24vh, 300px);
  --space-section-y-fluid: clamp(72px, 12vh, 160px);
  --space-section-head: clamp(32px, 5vh, 64px);
  --space-section-gap: clamp(40px, 7vw, 112px);
  --space-section-gap-lg: clamp(40px, 8vw, 128px);
  --space-stack-sm: 12px;
  --space-stack-md: 18px;
  --space-stack-lg: 28px;
  --space-stack-xl: 48px;
  --space-row-xs: 8px;
  --space-row-sm: 12px;
  --space-row-md: 18px;
  --space-row-lg: 24px;
  --space-card-pad: 24px;
  --space-form-pad: 16px;
  --space-button-x: 24px;
  --space-grid-md: clamp(20px, 3vw, 44px);
  --space-grid-lg: clamp(28px, 4vw, 80px);
  --space-media-stack: clamp(40px, 22vh, 240px);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-page: cubic-bezier(0.76, 0, 0.24, 1);
  --duration-fast: 0.2s;
  --duration-hover-fast: 0.42s;
  --duration-medium: 0.55s;
  --duration-reveal: 0.78s;
  --duration-slow: 1s;
  --duration-slower: 1.2s;
  --duration-page-out: 0.5s;
  --duration-page-in: 0.6s;
  --duration-page-theme: 0.62s;
  --hover-duration: 0.62s;
  --page-transition-base: var(--pr-graphite);
  --page-transition-accent: var(--pr-rocket);
  --page-transition-edge: var(--pr-lime);

  /* Layout */
  --header-height: 86px;
  --shell: min(100% - 48px, 1440px);
  --shell-wide: min(100% - 48px, 1440px);
  --shell-content: min(100% - 48px, 1320px);
  --shell-narrow: min(100% - 48px, 960px);
  --sticky-top: 110px;
  --sticky-offset: 170px;
  --full-bleed-gutter: calc((100vw - var(--shell)) / 2);

  /* ---- Hamburger menu reveal geometry ----
     main.js sets --mr-* from the live hamburger rect. The circle's
     radius (--mr-radius) is held constant through the circle and the
     square so the corners never change curvature as it grows. */
  --mr-top: 24px;
  --mr-right: 24px;
  --mr-bottom: calc(100svh - 72px);
  --mr-left: calc(100vw - 72px);
  --mr-right-x: calc(100vw - 24px);
  --mr-radius: 24px;
  --menu-reveal-square: min(62vw, 58svh, 460px);

  /* Closed/start: a circle sitting exactly on the hamburger button. */
  --menu-reveal-start: inset(
    var(--mr-top)
    var(--mr-right)
    var(--mr-bottom)
    var(--mr-left)
    round var(--mr-radius)
  );
  --menu-reveal-closed: var(--menu-reveal-start);
  /* Hold: a rounded square growing down and left from the hamburger's
     top-right corner, retaining the circle's exact corner radius. */
  --menu-reveal-hold: inset(
    var(--mr-top)
    var(--mr-right)
    calc(100svh - var(--mr-top) - var(--menu-reveal-square))
    max(0px, calc(var(--mr-right-x) - var(--menu-reveal-square)))
    round var(--mr-radius)
  );
  --menu-reveal-open: inset(0 0 0 0 round 0);
}

body[data-display-font="default"] {
  --font-display: var(--font-display-default);
}

body[data-display-font="staatliches"] {
  --font-display: var(--font-display-staatliches);
}

body[data-display-font="bowlby"] {
  --font-display: var(--font-display-bowlby);
}

body[data-display-font="boldonse"] {
  --font-display: var(--font-display-boldonse);
}

@media (max-width: 980px) {
  :root {
    --shell: min(100% - 32px, 760px);
  }
}

@media (max-width: 640px) {
  :root {
    --shell: min(100% - 24px, 440px);
  }
}