/* ==========================================================================
   Ben Richard Design · Design tokens
   --------------------------------------------------------------------------
   Do not hand-edit the GENERATED block: change theme.json, then run
   `node tools/sync-tokens.js`. Responsive overrides below are hand-authored.
   ========================================================================== */

/* GENERATED:START */
:root {
  /* Color */
  --bg: var(--wp--preset--color--bg, #1D1B1A);
  --fg: var(--wp--preset--color--fg, #FFFFFF);
  --accent: var(--wp--preset--color--accent, #2ECFA8);
  --orange: var(--wp--preset--color--orange, #FF7336);
  --ink: var(--wp--preset--color--ink, #1D1B1A);
  --paper: var(--wp--preset--color--paper, #FFFFFF);
  --brand: var(--wp--preset--color--brand, #2B4A40);
  --soft: var(--wp--custom--color--soft, rgba(255,255,255,.85));
  --muted: var(--wp--custom--color--muted, rgba(255,255,255,.62));
  --line: var(--wp--custom--color--line, rgba(255,255,255,.35));
  --line-soft: var(--wp--custom--color--line-soft, rgba(255,255,255,.16));
  --glass: var(--wp--custom--color--glass, rgba(255,255,255,.06));
  --ink-muted: var(--wp--custom--color--ink-muted, rgba(29,27,26,.62));
  --ink-line: var(--wp--custom--color--ink-line, rgba(29,27,26,.3));

  /* Typography */
  --font: var(--wp--preset--font-family--epilogue, "Epilogue", system-ui, -apple-system, sans-serif);
  --fw-light: var(--wp--custom--font--light, 300);
  --fw-regular: var(--wp--custom--font--regular, 400);
  --fw-medium: var(--wp--custom--font--medium, 500);
  --tracking-label: var(--wp--custom--font--tracking-label, 0);
  --tracking-heading: var(--wp--custom--font--tracking-heading, 0);
  --fs-xs: var(--wp--preset--font-size--xs, 12px);
  --fs-sm: var(--wp--preset--font-size--sm, 14px);
  --fs-base: var(--wp--preset--font-size--base, 16px);
  --fs-lg: var(--wp--preset--font-size--lg, 18px);
  --fs-h3: var(--wp--preset--font-size--h3, 24px);
  --fs-h2: var(--wp--preset--font-size--h2, 32px);
  --fs-h1: var(--wp--preset--font-size--h1, 40px);
  --fs-display: var(--wp--preset--font-size--display, 48px);

  /* Shape + space */
  --radius-lg: var(--wp--custom--radius--lg, 16px);
  --radius-md: var(--wp--custom--radius--md, 12px);
  --radius-sm: var(--wp--custom--radius--sm, 8px);
  --radius-pill: var(--wp--custom--radius--pill, 999px);
  --gutter: var(--wp--custom--space--gutter, 24px);
  --side: var(--wp--custom--space--side, 80px);
  --max-w: var(--wp--custom--space--max-width, 1440px);
  --shadow-card: var(--wp--preset--shadow--card, 0 40px 80px -32px rgba(0,0,0,.8));
  --shadow-tile: var(--wp--preset--shadow--tile, 0 32px 64px -32px rgba(0,0,0,.7));
  --shadow-image: var(--wp--preset--shadow--image, 0 40px 80px -40px rgba(0,0,0,.45));
  --shadow-hero: var(--wp--preset--shadow--hero, 0 -24px 96px -40px rgba(0,0,0,.3));

  /* Motion */
  --ease: var(--wp--custom--motion--ease, cubic-bezier(.22,.61,.36,1));
  --dur-fast: var(--wp--custom--motion--fast, .3s);
  --dur-curtain: var(--wp--custom--motion--curtain, .5s);
  --dur-enter: var(--wp--custom--motion--enter, .8s);
}
/* GENERATED:END */

:root {
  --radius: var(--radius-lg);       /* default card radius */
  /* Epilogue's capitals sit ~.14em above the centre of their line box.
     Uppercase labels shift down by this much so they look centred.
     Re-measure if the font changes. */
  --cap-shift: .14em;
}

/* Tablet */
@media (max-width: 1200px) {
  :root { --side: 40px; }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --gutter: 16px;
    --side: 16px;
    --radius-lg: 12px;
  }
}