/* ============================================================
   THE ISLAND PERSPECTIVE — Design Tokens / CSS Variables
   ============================================================ */

:root {

  /* ── Colors ─────────────────────────────────────────────── */
  --navy:        #0D0D0D;   /* was Deep Navy  — now near-black  */
  --teal:        #2A2A2A;   /* was Ocean Teal — now dark gray   */
  --teal-hover:  #111111;   /* hover state — deeper black       */
  --island-blue: #F0F0F0;   /* was Island Blue — now light gray */
  --white:       #FFFFFF;
  --light-gray:  #F5F5F5;   /* card/section backgrounds         */
  --body-gray:   #555555;   /* article text                     */
  --divider:     #E0E0E0;   /* borders                          */
  --dark-text:   #0A0A0A;   /* headlines                        */
  --nav-active:  #1A1A1A;
  --error:       #C0392B;
  --success:     #1E8449;
  --hover-red:   #CC0000;   /* link / URL hover accent */

  /* ── Typography ──────────────────────────────────────────── */
  --font-serif:  'Merriweather', Georgia, serif;
  --font-sans:   'Inter', system-ui, sans-serif;
  --font-body:   'Source Sans 3', 'Helvetica Neue', sans-serif;

  /* ── Type Scale ──────────────────────────────────────────── */
  --text-xs:   0.6875rem;  /* 11px — category labels */
  --text-sm:   0.75rem;    /* 12px — meta/dates */
  --text-base: 0.875rem;   /* 14px — nav, footer */
  --text-md:   1rem;       /* 16px — body */
  --text-lg:   1.125rem;   /* 18px — article body */
  --text-xl:   1.25rem;    /* 20px — card headlines */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.75rem;    /* 28px — section titles */
  --text-4xl:  2.25rem;    /* 36px — feature headline */
  --text-5xl:  2.625rem;   /* 42px — hero headline */

  /* ── Spacing (8px base scale) ────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max:    1240px;
  --container-narrow:  860px;
  --sidebar-w:         300px;
  --gutter:             24px;

  /* ── Borders / Shadows ───────────────────────────────────── */
  --border:     1px solid var(--divider);
  --radius-sm:  3px;
  --radius:     5px;
  --shadow-sm:  0 1px 4px rgba(0,0,0,.06);
  --shadow:     0 2px 12px rgba(0,0,0,.09);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition: 0.2s ease;
}