/*
Theme Name:  Istwanou
Theme URI:   https://istwanou.net
Description: A lightweight, purpose-built WordPress theme for the Rasanblaj Haitian History Timeline. Designed for speed, accessibility, and cultural integrity. Five channels: Indigenous, African, Pre-Revolutionary, Haitian, Caribbean. Supports SureMembers subscription gating and PWA offline mode. No frameworks. No dependencies. Vanilla PHP + CSS + JS only.
Version:     1.4.41
Author:      Rasanblaj / Patrick
Author URI:  https://rasanblaj.org
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: istwanou
Tags:        history, timeline, haitian, pwa, custom-menu, custom-logo, featured-images, translation-ready

Istwanou — Haitian History Timeline
Built exclusively for istwanou.net
Part of the Rasanblaj Digital Heritage Platform
*/

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ─────────────────────────────────────────────────────────────
   All values live here. Nothing hardcoded in components.
═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Haitian Flag Palette ── */
  --flag-blue:    #00209F;
  --flag-red:     #D21034;
  --flag-navy:    #001166;
  --flag-crimson: #A00828;
  --flag-blue-10: rgba(0, 32, 159, 0.10);
  --flag-blue-20: rgba(0, 32, 159, 0.20);
  --flag-red-10:  rgba(210, 16,  52, 0.10);
  --flag-red-20:  rgba(210, 16,  52, 0.20);

  /* ── Hero / Dark Surfaces ── */
  --hero-base:    #040713;
  --hero-mid:     #070B1E;
  --hero-surface: rgba(255, 255, 255, 0.04);
  --hero-border:  rgba(255, 255, 255, 0.10);

  /* ── Light Body ── */
  --paper:        #F7F5F0;
  --white:        #FFFFFF;
  --mist:         #EEF1FA;
  --blush:        #FDF0F2;
  --divider:      rgba(0, 32, 159, 0.10);

  /* ── Typography Colors ── */
  --ink:          #0D1033;
  --charcoal:     #1E2340;
  --slate:        #3A4060;
  --smoke:        #6B7090;
  --ivory:        #F2EDE4;
  --ivory-dim:    rgba(242, 237, 228, 0.75);
  --ivory-faint:  rgba(242, 237, 228, 0.45);

  /* ── Channel Colors (4 historical channels) ── */
  --ch-indigenous:     #6B4C2A;  /* earth brown */
  --ch-african:        #1A7A4A;  /* deep green  */
  --ch-prerev:         #8B2A00;  /* dark amber  */
  --ch-haitian:        #00209F;  /* flag blue   */
  --ch-caribbean:      #0E6B7A;  /* teal sea    */

  /* ── Type Scale ── */
  --font-display: 'Cinzel Decorative', 'Georgia', serif;
  --font-heading: 'Cinzel', 'Georgia', serif;
  --font-body:    'EB Garamond', 'Georgia', serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --font-ui:      system-ui, -apple-system, sans-serif;

  --text-xs:   0.7rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-4xl:  3.5rem;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ── Layout ── */
  --max-width:        1100px;
  --max-width-narrow: 760px;
  --max-width-wide:   1300px;
  --nav-height:       64px;
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        16px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-blue: 0 4px 20px rgba(0, 32, 159, 0.15);
  --shadow-red:  0 4px 20px rgba(210, 16, 52, 0.15);

  /* ── Transitions ── */
  --ease:       0.2s ease;
  --ease-slow:  0.4s ease;

  /* ── Flag Stripe (reusable) ── */
  --flag-stripe: linear-gradient(90deg, var(--flag-blue) 50%, var(--flag-red) 50%);
}