/* ============================================================
   BAT ORNATE — DESIGN TOKENS (WordPress edition)
   ------------------------------------------------------------
   Ported from the ace-interiors-v4 static build. Every colour
   and font token now reads from the WordPress global-styles
   preset variables first, with the shipped brand value as the
   fallback. Editing colours/fonts in the Site Editor's Styles
   panel therefore re-skins the entire site — this file is the
   bridge that makes the dashboard the single swap point.

   REBRAND: change the palette in theme.json (or live in the
   Styles panel). Only touch this file to add NEW tokens.
   ============================================================ */

:root {

  /* ---------- 1. BRAND COLOUR ----------------------------- */
  --c-accent:        var(--wp--preset--color--accent, #7A0000);
  --c-accent-deep:   var(--wp--preset--color--accent-deep, #560000);
  --c-accent-soft:   var(--wp--preset--color--accent-soft, #EFE1DE);
  --c-accent-bright: var(--wp--preset--color--accent, #7A0000);
  --c-accent-light:  var(--wp--preset--color--accent-light, #D9B4A6);

  /* ---------- 2. NEUTRALS -------------------------------- */
  --c-ink:     var(--wp--preset--color--ink, #1E1E1E);
  --c-ink-2:   var(--wp--preset--color--ink-2, #2A2422);
  --c-body:    var(--wp--preset--color--body, #4A423E);
  --c-muted:   var(--wp--preset--color--muted, #8C8078);
  --c-line:    var(--wp--preset--color--line, #E4DCD2);
  --c-canvas:  var(--wp--preset--color--canvas, #F4F1EB);
  --c-surface: var(--wp--preset--color--surface, #FBF8F3);
  --c-sand:    var(--wp--preset--color--sand, #EBE4D9);

  /* ---------- 2b. IMAGE OVERLAYS -------------------------- */
  --c-veil-0:    color-mix(in srgb, var(--c-ink) 0%,  transparent);
  --c-veil-20:   color-mix(in srgb, var(--c-ink) 20%, transparent);
  --c-veil-45:   color-mix(in srgb, var(--c-ink) 45%, transparent);
  --c-veil-55:   color-mix(in srgb, var(--c-ink) 55%, transparent);
  --c-veil-75:   color-mix(in srgb, var(--c-ink) 75%, transparent);

  /* ---------- 3. ON-DARK ---------------------------------- */
  --c-on-dark:       var(--wp--preset--color--on-dark, #F4EFE7);
  --c-on-dark-muted: var(--wp--preset--color--on-dark-muted, #B2A79B);
  --c-on-dark-line:  var(--wp--preset--color--on-dark-line, #38312E);

  /* ---------- 4. TYPEFACES -------------------------------- */
  --f-display: var(--wp--preset--font-family--display, "Cinzel Decorative", Georgia, serif);
  --f-body:    var(--wp--preset--font-family--body, "EB Garamond", Georgia, serif);
  --f-script:  var(--wp--preset--font-family--script, "Dancing Script", cursive);
  --w-display: 400;

  /* ---------- 5. TYPE SCALE (fluid, 390px → 1440px) ------- */
  --t-hero:    clamp(2.9rem, 1.05rem + 7.9vw, 8rem);
  --t-h1:      clamp(2.30rem, 1.30rem + 4.20vw, 4.75rem);
  --t-h2:      clamp(1.95rem, 1.25rem + 2.95vw, 3.60rem);
  --t-h3:      clamp(1.15rem, 1.00rem + 0.65vw, 1.50rem);
  --t-lead:    clamp(1.05rem, 0.96rem + 0.38vw, 1.25rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-eyebrow: 0.72rem;
  --t-numeral: clamp(2.60rem, 1.70rem + 3.80vw, 4.40rem);

  --lh-tight:  0.98;
  --lh-snug:   1.14;
  --lh-body:   1.68;

  --ls-eyebrow: 0.20em;
  --ls-tight:  -0.03em;

  /* ---------- 6. SPACING SCALE ---------------------------- */
  --s-1:  0.5rem;
  --s-2:  0.875rem;
  --s-3:  1.25rem;
  --s-4:  1.75rem;
  --s-5:  2.5rem;
  --s-6:  3.5rem;
  --s-7:  5rem;
  --s-8:  7rem;
  --s-section: clamp(5rem, 3.2rem + 7.5vw, 9.5rem);

  /* ---------- 7. LAYOUT ----------------------------------- */
  --w-max:     1340px;
  --w-text:    62ch;
  --gutter:    clamp(1.25rem, 0.6rem + 2.8vw, 3.5rem);

  /* ---------- 8. RADII ------------------------------------ */
  --r-sm:   8px;
  --r-md:  16px;
  --r-lg:  26px;
  --r-xl:  38px;
  --r-pill: 999px;

  /* ---------- 9. SHADOWS ---------------------------------- */
  --sh-sm:  0 2px 10px  color-mix(in srgb, var(--c-ink) 6%,  transparent);
  --sh-md:  0 16px 40px color-mix(in srgb, var(--c-ink) 10%, transparent);
  --sh-lg:  0 30px 70px color-mix(in srgb, var(--c-ink) 16%, transparent);

  /* ---------- 10. MOTION ---------------------------------- */
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:  0.25s;
  --d-mid:   0.5s;
  --d-slow:  0.9s;
  --d-wheel: 22s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0.01s; --d-mid: 0.01s; --d-slow: 0.01s; }
}