/**
 * BeYou — layer 1: design tokens.
 *
 * theme.json is the source of truth for palette, type ramp and spacing. This
 * file only re-exports those presets under short `--by-*` aliases and adds the
 * component-level tokens that theme.json has no vocabulary for.
 *
 * Do not hard-code a colour, duration or radius anywhere else in the theme.
 */

:root {
  /* Palette (aliases of theme.json presets). */
  --by-ivory: var(--wp--preset--color--ivory, #f7f4ee);
  --by-white: var(--wp--preset--color--white, #ffffff);
  --by-ink: var(--wp--preset--color--ink, #111110);
  --by-ink-soft: var(--wp--preset--color--ink-soft, #2a2a26);
  --by-gold: var(--wp--preset--color--gold, #b3883a);
  --by-gold-light: var(--wp--preset--color--gold-light, #d4b071);
  /* Accessible gold for small text and icons on light surfaces: the brand
     gold #B3883A gives 2.9:1 on ivory, below the 4.5:1 WCAG AA threshold.
     #8A6526 is the same hue at 4.8:1. Brand gold stays for large display
     type, rules and anything on a dark surface. */
  --by-gold-ink: #8a6526;
  --by-muted: var(--wp--preset--color--muted, #6f6c63);
  --by-line: var(--wp--preset--color--line, #e3ded3);
  --by-dark: var(--wp--preset--color--dark-olive, #1a1a17);

  /* Derived surfaces. */
  --by-surface: var(--by-ivory);
  --by-surface-raised: var(--by-white);
  --by-surface-sunken: #efeae0;
  --by-gold-wash: rgba(179, 136, 58, 0.08);

  /* Typography. */
  --by-font-display: var(--wp--preset--font-family--display, Georgia, serif);
  --by-font-body: var(--wp--preset--font-family--body, system-ui, sans-serif);
  --by-track-wide: var(--wp--custom--tracking--wide, 0.08em);
  --by-track-wider: var(--wp--custom--tracking--wider, 0.18em);

  /* Spacing aliases. */
  --by-space-1: var(--wp--preset--spacing--10, 0.25rem);
  --by-space-2: var(--wp--preset--spacing--20, 0.5rem);
  --by-space-3: var(--wp--preset--spacing--30, 1rem);
  --by-space-4: var(--wp--preset--spacing--40, 1.5rem);
  --by-space-5: var(--wp--preset--spacing--50, 2.5rem);
  --by-space-6: var(--wp--preset--spacing--60, 4rem);
  --by-space-7: var(--wp--preset--spacing--70, clamp(4rem, 9vw, 6rem));
  --by-space-8: var(--wp--preset--spacing--80, clamp(5.5rem, 12vw, 9rem));

  /* Shape. */
  --by-radius: var(--wp--custom--radius--sharp, 0px);
  --by-radius-soft: var(--wp--custom--radius--soft, 4px);
  --by-radius-pill: var(--wp--custom--radius--pill, 999px);
  --by-hairline: 1px solid var(--by-line);

  /* Elevation. */
  --by-shadow-subtle: var(--wp--preset--shadow--subtle, 0 1px 2px rgba(17, 17, 16, 0.04));
  --by-shadow-raised: var(--wp--preset--shadow--raised, 0 12px 32px -18px rgba(17, 17, 16, 0.35));
  --by-shadow-floating: var(--wp--preset--shadow--floating, 0 24px 60px -28px rgba(17, 17, 16, 0.45));

  /* Motion. */
  --by-duration-instant: 0.01s;
  --by-motion-fast: var(--wp--custom--motion--fast, 160ms cubic-bezier(0.16, 1, 0.3, 1));
  --by-motion-base: var(--wp--custom--motion--base, 320ms cubic-bezier(0.16, 1, 0.3, 1));
  --by-motion-slow: var(--wp--custom--motion--slow, 600ms cubic-bezier(0.16, 1, 0.3, 1));

  /* Shell metrics. */
  --by-container: 1200px;
  --by-container-wide: 1480px;
  --by-gutter: clamp(1.25rem, 4vw, 3rem);
  --by-header-height: 72px;
  --by-topbar-height: 34px;

  /* Media ratios. Product photography is normalised to a square canvas. */
  --by-ratio-product: 1 / 1;
  --by-ratio-portrait: 3 / 4;
  --by-ratio-hero: 4 / 5;

  /* Focus ring. */
  --by-focus-ring: 2px solid var(--by-gold);
  --by-focus-offset: 3px;

  /* Z-index scale — the only place these numbers are allowed to live. */
  --by-z-header: 100;
  --by-z-sticky: 90;
  --by-z-overlay: 200;
  --by-z-dialog: 210;
}

@media (max-width: 781px) {
  :root {
    --by-header-height: 64px;
  }
}