/* ============================================================
   variables.css — Design tokens for RiVision
   ============================================================
   This is the single place to change colors, fonts, and spacing.
   Every other CSS file reads from these variables.
   ============================================================ */

:root {

  /* ── COLOURS ─────────────────────────────────────────────
     Change any hex value here to update it site-wide.
  ──────────────────────────────────────────────────────── */
  --obsidian:       #0A0A0A;   /* Darkest — hero background, main text */
  --ivory:          #F5F5F3;   /* Lightest — page background           */
  --graphite:       #1C1C1C;   /* Dark sections, nav scrolled          */
  --graphite-mid:   #2C2C2C;   /* Card backgrounds                     */
  --ash:            #8A8A82;   /* Muted text, labels                   */
  --ash-light:      #B0B0A8;   /* Captions, nav links                  */
  --amber:          #C8A96E;   /* Accent — CTAs, hover, dividers       */
  --amber-light:    #D4BC8A;   /* Hover state of amber                 */
  --amber-dim:      rgba(200, 169, 110, 0.12); /* Subtle amber bg      */

  /* ── TYPOGRAPHY ──────────────────────────────────────────
     --serif  = DM Serif Display (headings, logo, big titles)
     --sans   = DM Sans (body text, labels, buttons)
  ──────────────────────────────────────────────────────── */
  --serif:  'DM Serif Display', Georgia, serif;
  --sans:   'DM Sans', system-ui, sans-serif;

  /* ── LAYOUT ──────────────────────────────────────────────
     --nav-h  = height of the fixed navigation bar
     --gap    = standard section side padding
  ──────────────────────────────────────────────────────── */
  --nav-h:  72px;
  --gap:    48px;

  /* ── TRANSITIONS ─────────────────────────────────────────
     Reuse these for consistent animation feel.
  ──────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --duration:  0.3s;
}