/**
 * Element 47 — design system (tokens only).
 *
 * Semantic usage:
 *   --e47-font-*     → UI copy (sans) vs display / headings (serif)
 *   --e47-color-bg-* → Page + section backgrounds (cream vs dark bands)
 *   --e47-color-text-* → Body, muted, inverse (on dark)
 *   --e47-color-accent-* → Gold family (labels, CTAs, stars, kicker)
 *   --e47-color-border-* → Hairlines, grids, cards
 *   --e47-button-* → Shared button typography, transitions, and semantic fills (gold on dark, shop dark, outline, ghost)
 *
 * Prefer var(--e47-*) in new CSS. Legacy rules may still use hex; migrate when touching a block.
 */
:root {
  /* Typography */
  --e47-font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --e47-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --e47-font-body: var(--e47-font-sans);
  --e47-font-heading: var(--e47-font-serif);

  --e47-text-2xs: 0.58rem;
  --e47-text-xs: 0.62rem;
  --e47-text-sm: 0.72rem;
  --e47-text-base: 0.88rem;
  --e47-text-md: 0.92rem;
  --e47-text-lg: 1.05rem;

  --e47-weight-regular: 400;
  --e47-weight-medium: 500;
  --e47-weight-semibold: 600;
  --e47-weight-bold: 700;
  --e47-weight-extrabold: 800;

  --e47-tracking-label: 0.16em;
  --e47-tracking-label-wide: 0.2em;
  --e47-tracking-label-wider: 0.22em;
  --e47-tracking-button: 0.14em;

  --e47-leading-tight: 1.02;
  --e47-leading-snug: 1.12;
  --e47-leading-normal: 1.6;
  --e47-leading-relaxed: 1.65;

  /* Page & cream surfaces */
  --e47-color-bg-page: #f9f8f6;
  --e47-color-bg-cream: #faf8f4;
  --e47-color-bg-cream-warm: #fffef9;
  --e47-color-bg-cream-alt: #fcfbf9;
  --e47-color-bg-card: #fffdf9;
  --e47-color-bg-why: #f3f2eb;

  /* Text — light UI */
  --e47-color-text: #201c17;
  --e47-color-text-primary: #1a1816;
  --e47-color-text-strong: #1f1c18;
  --e47-color-text-heading: #2a2622;
  --e47-color-text-muted: #5c574e;
  --e47-color-text-soft: #3a342c;
  --e47-color-text-subtle: #6b655c;

  /* Text & surfaces — inverse (dark sections) */
  --e47-color-text-inverse: #faf8f4;
  --e47-color-text-inverse-muted: rgba(250, 248, 244, 0.88);
  --e47-color-text-inverse-dim: rgba(232, 230, 227, 0.72);

  /* Dark bands */
  --e47-color-bg-dark: #0b0b0c;
  --e47-color-bg-dark-elevated: #0e0f12;
  --e47-color-bg-dark-science: #141312;
  --e47-color-bg-black: #000;

  /* Gold / brand */
  --e47-color-accent: #c4b08e;
  --e47-color-accent-hover: #b39a72;
  --e47-color-accent-muted: #b09a78;
  --e47-color-accent-label: #a38f6e;
  --e47-color-accent-stars: #b89f6e;
  --e47-color-accent-soft: #a08f6e;
  --e47-color-accent-philosophy: #b09a78;

  /* Hairlines & grids */
  --e47-color-border: #e8e2d8;
  --e47-color-border-subtle: #e5e2db;
  --e47-color-border-grid: #e5e0d6;
  --e47-color-border-inverse: rgba(255, 255, 255, 0.12);
  --e47-color-border-inverse-strong: rgba(255, 255, 255, 0.22);

  /* Layout */
  --e47-container-max: 1200px;
  --e47-container-gutter: 3rem;
  --e47-space-section-y: 8rem;
  --e47-space-section-y-tight: 2.75rem;

  --e47-radius: 0;
  --e47-transition-fast: 180ms ease;
  --e47-transition-base: 240ms ease;
  --e47-transition-slow: 260ms ease;

  /* Buttons — shared */
  --e47-button-font-family: var(--e47-font-body);
  --e47-button-radius: var(--e47-radius);
  --e47-button-transition: background-color var(--e47-transition-fast),
    color var(--e47-transition-fast), border-color var(--e47-transition-fast),
    opacity var(--e47-transition-fast), transform var(--e47-transition-fast);

  /* On-dark: gold filled primary (hero video, etc.) */
  --e47-button-on-dark-primary-bg: var(--e47-color-accent);
  --e47-button-on-dark-primary-bg-hover: var(--e47-color-accent-hover);
  --e47-button-on-dark-primary-fg: #0a0a0b;
  --e47-button-on-dark-primary-fg-hover: #050506;
  --e47-button-on-dark-primary-border: var(--e47-color-accent);

  /* On-dark: softer gold default (large reset CTA) → hover matches standard gold */
  --e47-button-on-dark-primary-bg-soft: #d3c2a0;
  --e47-button-on-dark-primary-border-soft: #d3c2a0;
  --e47-button-on-dark-primary-fg-soft: #1a1816;
  --e47-button-on-dark-primary-fg-hover-soft: #12100e;

  /* On-dark: ghost / outline */
  --e47-button-on-dark-ghost-fg: var(--e47-color-text-inverse);
  --e47-button-on-dark-ghost-border: rgba(250, 248, 244, 0.45);
  --e47-button-on-dark-ghost-border-muted: rgba(250, 248, 244, 0.35);
  --e47-button-on-dark-ghost-border-hover: rgba(250, 248, 244, 0.75);
  --e47-button-on-dark-ghost-border-hover-muted: rgba(250, 248, 244, 0.55);
  --e47-button-on-dark-ghost-bg-hover: rgba(255, 255, 255, 0.04);
  --e47-button-on-dark-ghost-bg-hover-strong: rgba(255, 255, 255, 0.05);
  --e47-button-on-dark-ghost-border-solid-hover: var(--e47-color-text-inverse);

  /* Mega — solid cream on dark */
  --e47-button-mega-solid-bg: #efe6d8;
  --e47-button-mega-solid-bg-hover: #e4d8c6;
  --e47-button-mega-solid-fg: #252322;

  /* Shop — compact dark add-to-cart */
  --e47-button-shop-dark-bg: #111;
  --e47-button-shop-dark-fg: #fff;
  --e47-button-shop-dark-border: #111;
  --e47-button-shop-dark-bg-hover: #2a2622;
  --e47-button-shop-dark-border-hover: #2a2622;
  --e47-button-shop-dark-fg-hover: #fff;
  /* Product grid — invert on hover (outline flip) */
  --e47-button-shop-grid-invert-bg: #fff;
  --e47-button-shop-grid-invert-fg: #111;
  --e47-button-shop-grid-invert-border: #111;

  /* Shop — outline on cream (global Woo buttons) */
  --e47-button-shop-outline-bg: transparent;
  --e47-button-shop-outline-fg: #24201b;
  --e47-button-shop-outline-border: #24201b;
  --e47-button-shop-outline-bg-hover: #24201b;
  --e47-button-shop-outline-fg-hover: #f7f3eb;

  /* Legacy banner .btn — white tile → charcoal hover */
  --e47-button-banner-border: #fff;
  --e47-button-banner-bg: #fff;
  --e47-button-banner-bg-hover: #24201b;
  --e47-button-banner-fg-hover: #f6f2ea;
}