/* ============================================================
   RGL design tokens — strict 3-color palette.
   #1F0812 Coffee Bean · #FFEBD8 Antique White · #928075 Taupe
   All tints are one of these three at reduced opacity (flattened
   hexes note their derivation). Var names match the template fork.
   ============================================================ */
:root {
  /* --- color --- */
  --bg: #1F0812;             /* Coffee Bean: dark sections, header, footer, menu */
  --light: #FFEBD8;          /* Antique White: light sections, text on dark */
  --muted: #928075;          /* Taupe: secondary text, borders, chips */
  --text: #FFEBD8;
  --text-muted: #928075;
  --dark-on-light: #1F0812;  /* text on light sections */
  --border: rgb(146 128 117 / 0.45);
  --section-tint: #F2DECC;   /* = Taupe 12% over Antique White (the "second light") */
  --hover-deep: #301A21;     /* = Taupe 15% over Coffee Bean (dark button hover) */
  --accent: #928075;
  --gold: #D8A714;           /* warm gold accent — used on DARK contexts only
                                (8.6:1 on Coffee Bean; too faint on Antique White) */

  /* --- typography --- */
  --font-display: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --size-h1: clamp(44px, 5.6vw, 80px);
  --size-h2: clamp(34px, 4.4vw, 63px);
  --size-h3: clamp(26px, 2.5vw, 32px);
  --size-h4: clamp(22px, 2.2vw, 30px);
  --size-h5: 17px;
  --size-body: 15px;
  --size-caption: 12px;
  --lh-heading: 1.05;
  --lh-body: 1.5;

  /* --- spacing (5px grid) --- */
  --sp-1: 5px;  --sp-2: 10px; --sp-3: 15px; --sp-4: 20px;
  --sp-5: 25px; --sp-6: 30px; --sp-7: 35px; --sp-8: 40px;
  --sp-9: 45px; --sp-10: 50px; --sp-12: 60px; --sp-16: 80px;
  --sp-section: 100px;

  /* --- radius --- */
  --r-sm: 10px;
  --r-md: 20px;
  --r-lg: 30px;
  --r-xl: 40px;
  --r-pill: 40px;

  /* --- container --- */
  --container-max: 1360px;   /* 1280 content + 2x40 padding */
  --container-narrow: 790px;
  --container-pad: 40px;

  /* --- z-index --- */
  --z-base: 1;
  --z-raised: 10;
  --z-header: 100;
  --z-overlay: 9999;

  /* --- motion --- */
  --dur-fast: 0.25s;
  --dur-base: 0.3s;
  --dur-slow: 0.5s;
  --dur-fill: 0.7s;
  --ease-fill: cubic-bezier(0, 0.25, 0.5, 1);
  --ease-reveal: cubic-bezier(0.4, 0, 0.2, 1);
}