/* Bochic design tokens.
   Hand-maintained since the 2026-09-07 design pass: the `design/tokens.json` + `build-css-tokens.py`
   pair this file used to be generated from is not part of this repository, so this IS the source.
   Rationale for every value: execution/pilot/evidence/storefront/design-pass/DESIGN_NOTES.md. */
:root {
  /* colour — one warm-neutral surface family; the gemstone photography is the only saturated thing */
  --c-paper: #FAF8F4;
  --c-paper-raised: #FFFFFF;
  --c-paper-sunk: #F2EEE7;
  --c-paper-deep: #E7E1D7;
  --c-ink: #1F1D1A;
  --c-ink-soft: #4F4942;
  --c-ink-mute: #6B6358;
  --c-line: #E4DED4;
  --c-line-strong: #BDB3A4;
  --c-gilt: #C9A86A;
  --c-gilt-deep: #7E6534;
  --c-ink-invert: #FAF8F4;
  --c-night: #1F1D1A;
  --c-night-soft: #2B2825;
  --c-success: #2F5D3A;
  --c-notice: #8A5A1B;
  --c-focus: #1F1D1A;

  /* type families */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-ui: 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;

  /* type scale — fluid between a 320 phone and a 1440 desktop */
  --fs-display-xl: clamp(2.5rem, 1.75rem + 3.2vw, 4.25rem);
  --lh-display-xl: 1.02;
  --tr-display-xl: -0.02em;
  --fw-display-xl: 300;
  --fs-display-l: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
  --lh-display-l: 1.06;
  --tr-display-l: -0.015em;
  --fw-display-l: 300;
  --fs-display-m: clamp(1.75rem, 1.45rem + 1.25vw, 2.375rem);
  --lh-display-m: 1.12;
  --tr-display-m: -0.01em;
  --fw-display-m: 400;
  --fs-display-s: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);
  --lh-display-s: 1.22;
  --tr-display-s: 0;
  --fw-display-s: 400;
  --fs-body-l: 1.0625rem;
  --lh-body-l: 1.65;
  --tr-body-l: 0;
  --fw-body-l: 400;
  --fs-body: 1rem;
  --lh-body: 1.6;
  --tr-body: 0;
  --fw-body: 400;
  --fs-body-s: 0.875rem;
  --lh-body-s: 1.55;
  --tr-body-s: 0;
  --fw-body-s: 400;
  --fs-label: 0.75rem;
  --lh-label: 1.2;
  --tr-label: 0.14em;
  --fw-label: 500;
  --fs-label-s: 0.6875rem;
  --lh-label-s: 1.2;
  --tr-label-s: 0.16em;
  --fw-label-s: 500;

  /* space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 180px;
  --section-y: clamp(48px, 7vw, 104px);
  --gutter: clamp(16px, 4vw, 48px);

  /* layout */
  --max-page: 1440px;
  --max-content: 1200px;
  --max-prose: 60ch;
  --max-narrow: 760px;
  --grid-gap: clamp(12px, 2vw, 24px);
  --grid-gap-y: clamp(28px, 3.5vw, 44px);
  --header-h: 64px;

  /* radius / shadow — square corners; shadows only where something floats */
  --r-none: 0;
  --r-sm: 2px;
  --r-md: 3px;
  --r-pill: 999px;
  --sh-none: none;
  --sh-card: 0 1px 2px rgba(31, 29, 26, .05), 0 8px 24px -12px rgba(31, 29, 26, .12);
  --sh-lift: 0 2px 6px rgba(31, 29, 26, .06), 0 18px 44px -18px rgba(31, 29, 26, .2);
  --sh-drawer: 0 0 0 100vmax rgba(31, 29, 26, .42);

  /* motion */
  --d-fast: 140ms;
  --d-base: 260ms;
  --d-slow: 520ms;
  --d-reveal: 900ms;
  --e-standard: cubic-bezier(.22, .61, .36, 1);
  --e-enter: cubic-bezier(.16, .84, .44, 1);
  --e-exit: cubic-bezier(.4, 0, .7, .2);

  /* ratio — every piece of jewellery sits in the same portrait frame */
  --ar-product-card: 4 / 5;
  --ar-product-hero: 4 / 5;
  --ar-editorial: 4 / 5;
  --ar-campaign: 16 / 9;
  --ar-campaign-tall: 3 / 4;

  /* z-index */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;

  --focus-ring: 2px solid var(--c-focus);
  --focus-offset: 3px;
  --target-min: 44px;
}

/* Motion is a progressive enhancement, never a gate on content. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-reveal: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
}