/* ============================================================
   RIVĒ LUME — tokens.css
   All CSS custom properties. Sections 4–7 of handoff.
   ============================================================ */

:root {
  /* ---------- Color ---------- */

  /* Primary neutrals */
  --noir:        #0A0A0A;
  --charcoal:    #1A1A1A;
  --warm-dark:   #2A2A2A;
  --warm-deep:   #E5DED2;

  /* Warm mid-tones */
  --warm-gray:   #6B6560;
  --taupe:       #8A8279;
  --light-warm:  #B5AEA6;
  --soft-line:   #D4CFC9;

  /* Light backgrounds */
  --cream:       #D6D0C4;
  --off-white:   #F7F4F0;
  --white:       #FFFFFF;

  /* Accent */
  --warm-accent: #C4B5A5;

  /* Divider on dark */
  --divider-dark: rgba(255, 255, 255, 0.12);

  /* ---------- Typography families ---------- */

  --font-display: "area-extended", "Instrument Sans", "Inter", system-ui, sans-serif;
  --font-display-normal: "area-normal", "Instrument Sans", "Inter", system-ui, sans-serif;
  --font-serif:   "Libre Baskerville", "Cormorant Garamond", Georgia, serif;
  --font-body:    "DM Sans", "Inter", system-ui, -apple-system, sans-serif;

  /* ---------- Type scale (mobile-first) ---------- */

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;
  --text-5xl:  52px;
  --text-6xl:  68px;

  /* ---------- Spacing scale (8px base) ---------- */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   80px;
  --space-10:  96px;
  --space-11:  128px;
  --space-12:  160px;
  --space-13:  200px;
  --space-14:  240px;

  /* ---------- Layout ---------- */

  --container-max:    1280px;
  --container-gutter: 20px;

  --content-narrow: 640px;
  --content-medium: 880px;
  --content-full:   1280px;

  /* ---------- Breakpoints (reference only; media queries use literals) ---------- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-hover: 250ms;
  --dur-link:  200ms;
  --dur-reveal: 600ms;

  /* ---------- Borders ---------- */
  --hairline: 1px;
  --radius:   0; /* NON-NEGOTIABLE: no rounded corners anywhere */
}

@media (min-width: 1024px) {
  :root {
    --text-xs:   12px;
    --text-sm:   14px;
    --text-base: 16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;
    --text-3xl:  40px;
    --text-4xl:  56px;
    --text-5xl:  80px;
    --text-6xl:  112px;

    --container-gutter: 32px;
  }
}