/* Grandma's Secret Dania Beach — brand tokens.
   Palette: rich burgundy + warm bone from the existing Grandma's Secret identity. */

:root {
  /* Ink — deep burgundy tones */
  --ink-900: #45101e;
  --ink-800: #5c1328;
  --ink-700: #761832;
  --ink-600: #8a1f3d;

  /* Bone — warm cream for reading surfaces */
  --bone-50: #f3ede2;
  --bone-100: #eae0cf;
  --bone-200: #ddd0bc;
  --bone-300: #cfc0a8;
  --white: #ffffff;

  /* Accent, split by surface for WCAG compliance.
     On dark: warm bone (brand secondary) — not rose/pink.
     On light: rich burgundy from the original Grandma's Secret identity. */
  --accent-on-dark: #eae0cf;
  --accent-on-light: #9e2a48;
  --brass: #b8922e; /* decorative gold — pairs with burgundy */

  /* Foreground */
  --fg-on-dark-1: #f3ede2;
  --fg-on-dark-2: #c9bfb0;
  --fg-on-light-1: #2a221b;
  --fg-on-light-2: #5f5347;

  /* Overlays — hero scrims and glass header */
  --scrim-warm: rgba(18, 5, 10, 0.72);
  --scrim-burgundy: rgba(69, 16, 30, 0.88);
  --header-glass: rgba(18, 5, 10, 0.32);
  --header-glass-border: rgba(243, 237, 226, 0.1);

  /* Status */
  --positive: #3f9c62;
  --positive-on-dark: #6fd396;

  /* Type — Fraunces for warm display; Figtree for UI/body. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;
  --font-accent: var(--font-body);

  --display-width: 100;
  --display-weight: 600;

  /* Scale */
  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.7rem + 2.8vw, 4rem);
  --step-5: clamp(3rem, 1.8rem + 5.2vw, 6.5rem);

  /* Space */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* Shape */
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --container: 1240px;
  --container-narrow: 68ch;
  --header-h: 74px;

  --shadow-sm: 0 1px 2px rgba(69, 16, 30, 0.06), 0 4px 12px rgba(69, 16, 30, 0.05);
  --shadow-md: 0 2px 4px rgba(69, 16, 30, 0.06), 0 16px 40px rgba(69, 16, 30, 0.1);
  --shadow-lg: 0 30px 80px rgba(69, 16, 30, 0.22);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;
}