/* ============================================================================
   THE AGULHAS REPORT — DESIGN TOKENS
   Single source of truth. Derived exactly from the supplied brand kit.
   Both web properties (marketing site + reading app) import this file.
   Change a value here and it propagates everywhere. Do not hard-code colours,
   type, or spacing anywhere else.
   ============================================================================ */

/* ----- 1. FONTS (self-hosted; see ./fonts/ and fonts.css) ----------------- */
/* Display:  Cormorant Garamond  — high-contrast serif, the cover masthead voice
   Body:     Source Serif 4      — quiet, readable research-house body serif
   Mono:     IBM Plex Mono       — nautical coordinates, data labels, eyebrows  */

:root {
  /* ---- 2. CORE PALETTE (the two oceans + the beam) --------------------- */
  /* Ink / navy — the night sea. Primary dark ground. */
  --ink-900: #061826;   /* deepest — icon interior, footers */
  --ink-800: #0B2236;   /* PRIMARY navy — backgrounds, masthead */
  --ink-700: #122B41;   /* raised navy surfaces / cards on dark */
  --ink-600: #1C3850;   /* hairlines & borders on dark */

  /* Cream / ivory — the chart paper. Primary light ground. */
  --cream-50:  #FCFAF5; /* lightest — cards on cream */
  --cream-100: #F9F5EF; /* PRIMARY cream — light backgrounds */
  --cream-200: #F0EBE0; /* sunken cream / subtle fills */
  --cream-300: #E4DCCB; /* hairlines & borders on cream */

  /* The beam — amber/gold. The signature accent. Use sparingly, like light. */
  --beam-500: #C8992E;  /* PRIMARY amber */
  --beam-400: #D8AC45;  /* hover / lit */
  --beam-600: #A87E1F;  /* pressed / on cream for AA text */

  /* The two currents. */
  --current-warm: #3E7C74;  /* Indian Ocean, warm — teal */
  --current-warm-bright: #4E9A90;
  --current-cold: #5E7E99;  /* Atlantic, cold — steel blue */
  --current-cold-bright: #7398B4;

  /* ---- 3. SEMANTIC ROLES (use THESE in components) -------------------- */
  /* Defaults below are the light theme. [data-theme="dark"] overrides. */
  --bg:            var(--cream-100);
  --bg-sunken:     var(--cream-200);
  --bg-raised:     var(--cream-50);
  --surface-line:  var(--cream-300);
  --text:          var(--ink-800);
  --text-soft:     #3B4D5E;          /* muted body on cream */
  --text-faint:    #6A7886;          /* captions, meta */
  --accent:        var(--beam-500);
  --accent-ink:    var(--beam-600);  /* accent that must pass AA as text on cream */
  --on-accent:     var(--ink-900);   /* text/icon on an amber fill */
  --focus-ring:    var(--beam-500);

  /* Brand-mark variable hooks (consumed by the inline SVG logos) */
  --mark-bg:    var(--ink-800);
  --mark-line:  var(--cream-100);
  --mark-beam:  var(--beam-500);
  --mark-current-warm: var(--current-warm);
  --mark-current-cold: var(--current-cold);

  /* ---- 4. TYPOGRAPHY ------------------------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Modular scale (1.25 major-third), fluid via clamp where it matters */
  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.10rem);   /* body */
  --step-1:  clamp(1.25rem, 1.18rem + 0.36vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.43rem + 0.66vw, 2.00rem);
  --step-3:  clamp(1.95rem, 1.72rem + 1.16vw, 2.80rem);
  --step-4:  clamp(2.44rem, 2.05rem + 1.95vw, 3.80rem);
  --step-5:  clamp(3.05rem, 2.40rem + 3.25vw, 5.20rem);   /* hero masthead */

  --leading-tight: 1.08;
  --leading-snug:  1.28;
  --leading-body:  1.62;

  /* Eyebrow / label treatment (the "ISSUE 01 — SOUTH AFRICA" chart caption) */
  --tracking-eyebrow: 0.22em;
  --tracking-caps:    0.12em;

  /* ---- 5. SPACE & RHYTHM (8px base) ---------------------------------- */
  --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;
  --measure: 64ch;            /* max readable line length */
  --container: 1180px;        /* max content width */
  --container-narrow: 760px;

  /* ---- 6. RADIUS, BORDER, SHADOW ------------------------------------- */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 12px;
  --hairline: 1px solid var(--surface-line);
  /* Premium = quiet shadows. Navy-tinted, never grey. */
  --shadow-1: 0 1px 2px rgba(6,24,38,0.06), 0 2px 8px rgba(6,24,38,0.06);
  --shadow-2: 0 4px 12px rgba(6,24,38,0.10), 0 12px 32px rgba(6,24,38,0.10);
  --shadow-lift: 0 18px 50px rgba(6,24,38,0.22);

  /* ---- 7. MOTION ----------------------------------------------------- */
  --ease-glide: cubic-bezier(0.22, 0.61, 0.36, 1);   /* current-glide */
  --ease-out:   cubic-bezier(0.16, 1, 0.30, 1);
  --dur-fast:   180ms;
  --dur:        320ms;
  --dur-slow:   560ms;
  --dur-transition: 720ms;   /* the signature horizon-wipe between pages */

  /* ---- 8. SIGNATURE MOTIF GRADIENTS ---------------------------------- */
  /* The horizon: two currents meeting at the line. */
  --grad-horizon: linear-gradient(90deg, var(--current-cold) 0%, var(--current-cold-bright) 30%, var(--beam-500) 50%, var(--current-warm-bright) 70%, var(--current-warm) 100%);
  /* The beam: a directional wash of amber light. */
  --grad-beam: linear-gradient(105deg, transparent 0%, rgba(200,153,46,0.0) 40%, rgba(200,153,46,0.18) 75%, rgba(216,172,69,0.32) 100%);
  /* Deep sea vignette for hero grounds. */
  --grad-deep: radial-gradient(120% 90% at 50% -10%, #143049 0%, var(--ink-800) 45%, var(--ink-900) 100%);

  --z-nav: 100; --z-drawer: 200; --z-overlay: 300; --z-modal: 400;
}

/* ----- DARK THEME (reading app chrome, marketing hero sections) --------- */
[data-theme="dark"] {
  --bg:           var(--ink-800);
  --bg-sunken:    var(--ink-900);
  --bg-raised:    var(--ink-700);
  --surface-line: var(--ink-600);
  --text:         var(--cream-100);
  --text-soft:    #B9C4CF;
  --text-faint:   #8294A4;
  --accent:       var(--beam-500);
  --accent-ink:   var(--beam-400);   /* amber on navy passes AA bright */
  --on-accent:    var(--ink-900);
  --mark-bg:      transparent;
  --mark-line:    var(--cream-100);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30), 0 2px 10px rgba(0,0,0,0.28);
  --shadow-2: 0 6px 18px rgba(0,0,0,0.40), 0 16px 40px rgba(0,0,0,0.38);
  --shadow-lift: 0 24px 60px rgba(0,0,0,0.55);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms;
    --dur-transition: 1ms; --dur-slow: 1ms;
  }
}