/* =================================================================
   MEDUMOND — Design Tokens
   Single source of truth for colour, type, motion, spacing.
   Cinematic single-page system: ink/ivory + green glow, three fonts.
   ================================================================= */

:root {
  /* ---- Ink (dark backgrounds) — Medumond navy mapped to the reference's --ink ---- */
  --ink:        #0F2A44;   /* primary dark — page background */
  --ink-deep:   #0a1d30;   /* deeper chapter band */
  --ink-soft:   #14365a;   /* softer elevated surface */
  --ink-line:   rgba(124, 200, 168, 0.14);  /* hairline divider on dark */

  /* legacy navy aliases (kept so reused component code keeps working) */
  --c-navy:   var(--ink);
  --c-navy-2: var(--ink-deep);
  --c-navy-3: var(--ink-soft);
  --c-navy-4: #081626;

  /* ---- Ivory (light text on dark) ---- */
  --ivory:      #EAF0F6;   /* primary text on dark */
  --ivory-soft: #9FB0C2;   /* muted text / captions on dark */

  /* legacy text aliases */
  --c-text-light: var(--ivory);
  --c-text-dark:  var(--ivory-soft);
  --c-text-sub:   var(--ivory);
  --c-white:      #FFFFFF;

  /* ---- Green — Medumond accent (replaces the reference's champagne/sage) ---- */
  --green:        #3FA37D;  /* primary accent / glow / CTA */
  --green-2:      #7CC8A8;  /* secondary glow / soft accent */
  --green-deep:   #2f8761;  /* hover deepening */
  --green-soft:   rgba(63,163,125,0.10);

  /* atmospheric radial glows (the reference's signature ambient light) */
  --glow-green:   radial-gradient(circle at center, rgba(63,163,125,0.22), rgba(63,163,125,0) 70%);
  --glow-green-2: radial-gradient(circle at center, rgba(124,200,168,0.16), rgba(124,200,168,0) 70%);

  /* legacy green aliases */
  --c-green: var(--green);
  --c-green-2: var(--green-2);
  --c-green-deep: var(--green-deep);
  --c-green-soft: var(--green-soft);
  --c-sand: var(--green-2);
  --c-gold: var(--green);
  --c-gold-hover: var(--green-deep);

  /* ---- Typography: three-font cinematic system ----
     Display = Playfair Display (chapter headlines)
     Body    = Inter
     Mono    = IBM Plex Mono (chapter labels, numerals, technical tags) */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* legacy serif alias points at the display face */
  --font-serif: var(--font-display);

  --fs-hero: clamp(2.6rem, 5.6vw, 4.5rem);
  --fs-h2: clamp(1.8rem, 3vw, 2.6rem);
  --fs-h3: clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-body: 1.0625rem;          /* 17px — comfortable cinematic reading */
  --fs-lead: 1.2rem;
  --fs-mono-label: 0.8125rem;    /* 13px chapter labels / tags */
  --fs-numeral: clamp(3rem, 6vw, 5rem);
  --fs-small: 0.8125rem;
  --fs-footer: 0.8125rem;
  --fs-fine: 0.6875rem;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;        /* generous cinematic chapter padding */

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 820px;
  --radius: 14px;
  --radius-card: 14px;
  --radius-pill: 999px;
  --radius-btn: 8px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.28);
  --shadow-lift: 0 8px 30px rgba(0,0,0,0.4);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.2s;
  --t-nav: 0.3s;
  --t-reveal: 0.8s;

  /* ---- Navbar height ---- */
  --nav-h: 72px;
}

/* Breakpoint reference: Desktop >= 1024px | Tablet 768-1023px | Mobile <= 767px */