/* goop · tokens · generated by cresco-design:tokens from spec/tokens.json
 * single source of truth. a value outside a token is debt.
 *
 * goop is the first client in this system with NO accent colour. Across 1,465
 * rendered elements on goop.com there is not one chromatic value. The palette is
 * black, white, one warm cream and one gray — colour enters only through
 * photography. So --accent maps to ink, and that is the brand rule, not a gap.
 *
 * The other thing to hold: the ground is genuinely #FFF (goop paints no background
 * on html/body/main/footer) and the warm cream is the BLOCK. Not the other way round. */

:root {
  /* color · surfaces — white ground, cream block */
  --bg: #FFFFFF;
  --paper: #F9F8F4;

  /* color · ink — true black, on 1,383 of 1,465 elements */
  --ink: #000000;
  --ink-soft: #737373;   /* derived mix(ink,bg,.45) · 4.74:1 on bg · AA */
  --muted: #808080;      /* goop's own gray · 3.95:1 on bg · METADATA ONLY, fails AA for body */

  /* color · lines — warm, matched to the cream family, never neutral gray */
  --line: #E8E7E3;
  --line-soft: #F2F2F0;

  /* color · accent — goop has none. the accent IS the ink.
   * any colour in a goop layout that isn't in a photograph is off-brand. */
  --accent: #000000;
  --accent-soft: #E8E8E8;
  --accent-deep: #000000;

  /* color · goop-specific roles */
  --night: #000000;      /* announcement bar + inverted panels */
  --shell: #F5F5F5;      /* inert UI chrome */
  --ghost: #F9F8F4;      /* the oversized footer wordmark · 1.06:1 · DECORATIVE ONLY */

  /* color · state · neutral-leaning, so the no-colour rule survives contact with UI */
  --state-success: #1F5A38;
  --state-warning: #8A6416;
  --state-danger: #8C2E2E;
  --state-info: #3A4A5C;

  /* typography · Caslon displays, Grotesk works.
   * Libre Caslon and Inter are OFL stand-ins for the licensed brand pair
   * (Adobe Caslon Pro / Neue Haas Grotesk Display Pro) — see spec/identidad.md */
  --serif: 'Libre Caslon Display', 'Adobe Caslon Pro', Georgia, serif;
  --serif-text: 'Libre Caslon Text', 'Adobe Caslon Pro', Georgia, serif;
  --sans: 'Inter', 'Neue Haas Grotesk Display Pro', Helvetica, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* weight · 450 is goop's body weight — an optical weight between 400 and 500 */
  --fw-regular: 400;
  --fw-body: 450;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* type scale · 14px base, ratio editorial */
  --text-2xs: 9.5px;
  --text-xs: 10.5px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-display: clamp(48px, 5.4vw, 76px);

  /* line-height */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.5;
  --lh-relaxed: 1.55;

  /* letter-spacing */
  --tracking-tightest: -0.04em;
  --tracking-tight: -0.025em;
  --tracking-snug: -0.015em;
  --tracking-base: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.06em;
  --tracking-widest: 0.08em;

  /* spacing scale · base 4px */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* border-width */
  --bw: 0.5pt;
  --bw-thick: 1pt;

  /* radius · goop has exactly two: none, and pill. nothing between. */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;
  --r-pill: 100px;

  /* opacity */
  --o-faint: 0.4;
  --o-soft: 0.55;
  --o-mid: 0.7;
  --o-strong: 0.85;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.6, 0);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-instant: 80ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* container widths */
  --max-w-prose: 640px;
  --max-w-content: 1080px;
  --max-w-frame: 1280px;

  /* z-index */
  --z-base: 0;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 2000;
  --z-toast: 3000;

  /* breakpoints · reference */
  --bp-sm: 640px;
  --bp-md: 880px;
  --bp-lg: 1080px;
  --bp-xl: 1280px;

  /* focus ring · never outline:none without a replacement */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--accent);
  --focus-ring-offset: 2px;
}

/* a11y · respect the user's preference */
@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;
  }
}

/* a11y · global focus-visible */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 2px;
}