/* css/themes.css — Milestone 6 (OpenDyslexic for dyslexia mode only)
   Required local assets (add to repo, do not CDN):
   /fonts/OpenDyslexic-Regular.woff2
   /fonts/OpenDyslexic-Bold.woff2
   Optional fallback:
   /fonts/OpenDyslexic-Regular.woff
   /fonts/OpenDyslexic-Bold.woff
*/

/* ===== OpenDyslexic (local) ===== */
@font-face{
  font-family:"OpenDyslexic";
  src:
    url("../fonts/OpenDyslexic-Regular.woff2") format("woff2"),
    url("../fonts/OpenDyslexic-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"OpenDyslexic";
  src:
    url("../fonts/OpenDyslexic-Bold.woff2") format("woff2"),
    url("../fonts/OpenDyslexic-Bold.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* css/themes.css — Milestone 5 (Matte Editorial + Frosted Glass, No Holographic Glare) */

:root{
  /* Logo (editable) */
  --logo-color:#5f8dd3;

  /* Base palette */
  --color-white:#fff;
  --color-black:#000;

  --color-blue-50:#eff6ff;
  --color-blue-100:#dbeafe;
  --color-blue-200:#bfdbfe;
  --color-blue-300:#93c5fd;
  --color-blue-400:#60a5fa;
  --color-blue-500:#3b82f6;
  --color-blue-600:#2563eb;
  --color-blue-700:#1d4ed8;

  --color-gray-50:#f8fafc;
  --color-gray-100:#f1f5f9;
  --color-gray-200:#e2e8f0;
  --color-gray-300:#cbd5e1;
  --color-gray-400:#94a3b8;
  --color-gray-500:#64748b;
  --color-gray-600:#475569;
  --color-gray-700:#334155;
  --color-gray-800:#1e293b;
  --color-gray-900:#0f172a;
  --color-gray-950:#020617;

  --color-success:#22c55e;
  --color-warning:#eab308;
  --color-error:#ef4444;

  /* WG colors */
  --color-wg1:#38bdf8; --color-wg1-bg:rgba(56,189,248,.12);
  --color-wg2:#a78bfa; --color-wg2-bg:rgba(167,139,250,.12);
  --color-wg3:#34d399; --color-wg3-bg:rgba(52,211,153,.12);
  --color-leadership:#60a5fa;

  /* Typography */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem; --text-5xl:3rem;
  --leading-tight:1.25; --leading-normal:1.5; --leading-relaxed:1.625;

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem;
  --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem;

  /* Effects */
  --radius-sm:.25rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-2xl:1.5rem; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 4px 6px rgba(0,0,0,.35);
  --shadow-lg:0 10px 15px rgba(0,0,0,.35);

  /* Transitions */
  --transition-fast:150ms ease-out;
  --transition-base:300ms cubic-bezier(.4,0,.2,1);
  --transition-slow:600ms cubic-bezier(.4,0,.2,1);
  --transition-theme:400ms ease;
  --transition-bg:1400ms cubic-bezier(.2,.9,.2,1);

  /* Layout */
  --sidebar-width:260px;
  --content-max:1000px;
  --header-height:60px;

  /* Z */
  --z-base:0; --z-elevated:10; --z-sticky:100; --z-overlay:200; --z-modal:300; --z-tooltip:400;

  /* Legacy background vars (bg-canvas uses settings.json now) */
  --bg-hero-image:url('../images/bg-hero.webp');
  --bg-about-image:url('../images/bg-about.webp');
  --bg-wg-image:url('../images/bg-wg.webp');
  --bg-grants-image:url('../images/bg-grants.webp');
  --bg-micro-base-a:var(--bg-hero-image);
  --bg-micro-base-b:var(--bg-about-image);

  --logo-width:180px;

  /* ===== Milestone 5: Editorial Matte Core Tokens ===== */

  /* Paper & Ink (editorial feel) */
  --paper-tint:rgba(250,248,245,0.03);
  --ink:rgba(8,12,20,0.92);
  --ink-muted:rgba(8,12,20,0.65);

  /* Film / Vignette (photographic treatment) */
  --bg-film-opacity:0.38;
  --bg-vignette-opacity:0.55;

  /* Frosted glass surfaces */
  --surface-blur:14px;
  --surface-saturation:125%;
  --surface-highlight:none;
  --surface-grain-opacity:.035;

  /* Grain */
  --grain-opacity:0.025;

  /* Section tint hooks (soft, BG-harmonized) */
  --section-tint-a:rgba(70,140,130,.10);
  --section-tint-b:rgba(140,120,180,.08);
  --section-tint-c:rgba(180,140,80,.05);
}

/* =========================
   DARK THEME (default)
   Editorial ink, not flat blue
   ========================= */
:root,[data-theme="dark"]{
  color-scheme:dark;

  /* Ink-like base: charcoal with subtle warm undertone, NOT blue */
  --bg-page:#06080c;
  --bg-surface:rgba(12,14,18,.72);
  --bg-surface-elevated:rgba(16,18,24,.78);

  /* Links/focus keep existing accents (readability) */
  --color-link:var(--color-blue-300);
  --color-link-hover:var(--color-blue-200);
  --color-focus:var(--color-blue-400);
  --color-accent:var(--color-blue-500);

  --text-primary:rgba(248,250,252,0.97);
  --text-secondary:rgba(226,232,240,.78);
  --text-muted:rgba(148,163,184,.55);

  --border-default:rgba(148,163,184,.18);
  --border-subtle:rgba(255,255,255,.06);

  /* Matte frosted surfaces (modest blur, desaturated) */
  --surface-bg:rgba(14,16,22,.62);
  --surface-border:rgba(148,163,184,.16);
  --surface-shadow:0 18px 60px rgba(0,0,0,.50);
  --surface-blur:14px;
  --surface-saturation:120%;

  /* Glass mapping */
  --glass-bg:rgba(18,20,28,.58);
  --glass-border:rgba(255,255,255,.08);
  --glass-blur:12px;

  --bg-glass:rgba(255,255,255,.025);
  --bg-glass-hover:rgba(255,255,255,.055);
  --bg-glass-active:rgba(255,255,255,.085);

  /* Reading surfaces */
  --content-surface-bg:rgba(14,16,22,.65);
  --content-surface-border:rgba(148,163,184,.14);
  --content-surface-shadow:0 16px 50px rgba(0,0,0,.45);
  --content-surface-blur:14px;

  /* Soft diffusion sheen (NO holographic rainbow) */
  --content-surface-sheen:
    radial-gradient(100% 80% at 20% 0%, rgba(255,255,255,.04) 0%, transparent 50%);
  --content-surface-sheen-opacity:.40;
  --content-surface-sheen-blend:soft-light;

  /* Card sheen: subtle matte highlight only */
  --card-sheen:
    radial-gradient(100% 80% at 15% 0%, rgba(255,255,255,.035) 0%, transparent 55%);
  --card-sheen-opacity:.12;

  /* Section scrim (very light, lets BG show) */
  --section-scrim:
    radial-gradient(100% 70% at 65% 5%, rgba(60,90,90,.08) 0%, transparent 55%),
    radial-gradient(100% 70% at 30% 15%, rgba(100,90,130,.06) 0%, transparent 50%),
    linear-gradient(180deg, rgba(6,8,12,.45) 0%, rgba(6,8,12,.20) 50%, rgba(6,8,12,.05) 100%);

  /* Background overlay (REDUCED opacity for BG visibility) */
  --bg-overlay:
    radial-gradient(90% 70% at 30% 10%, rgba(50,80,80,.10) 0%, transparent 55%),
    radial-gradient(90% 70% at 70% 8%, rgba(90,70,120,.08) 0%, transparent 50%),
    radial-gradient(80% 60% at 50% 90%, rgba(140,100,60,.04) 0%, transparent 55%),
    linear-gradient(180deg, rgba(6,8,12,.50) 0%, rgba(6,8,12,.25) 45%, rgba(6,8,12,.08) 100%);

  /* Overlay master opacity (for .bg-canvas__overlay) */
  --bg-overlay-opacity:0.38;

  /* Grain */
  --bg-noise-opacity:0.028;

  --hero-title-shadow:0 0 24px rgba(0,0,0,.60);

  /* Nav: matte, no neon */
  --nav-hover-bg:rgba(255,255,255,.04);
  --nav-hover-border:rgba(255,255,255,.08);
  --nav-active-bg:rgba(70,130,150,.08);
  --nav-active-border:rgba(100,150,180,.14);

  --scrim-radial:radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.70) 100%);
  --glow-soft:0 0 14px rgba(100,160,170,.12);
  --glow-medium:0 0 22px rgba(130,120,170,.14);

  --map-water:#070d1a; --map-land:#1e293b; --map-participating:#3b82f6; --map-hover:#60a5fa; --map-stroke:#0f172a;
  --marker-glow:rgba(59,130,246,.5); --marker-core:#60a5fa; --marker-pulse:rgba(59,130,246,.35);
}

/* =========================
   LIGHT THEME (editorial paper)
   Off-white paper, clean glass
   ========================= */
[data-theme="light"]{
  color-scheme:light;

  /* Paper base (warm off-white) */
  --bg-page:#f7f6f2;
  --bg-surface:rgba(255,255,255,.72);
  --bg-surface-elevated:rgba(255,255,255,.85);

  --text-primary:#0c1018;
  --text-secondary:rgba(12,16,24,.70);
  --text-muted:rgba(12,16,24,.48);

  --border-default:rgba(15,23,42,.14);
  --border-subtle:rgba(15,23,42,.08);

  --color-link:var(--color-blue-600);
  --color-link-hover:var(--color-blue-700);
  --color-focus:var(--color-blue-500);

  /* Matte frosted surfaces (paper + diffusion) */
  --surface-bg:rgba(255,255,255,.65);
  --surface-border:rgba(15,23,42,.10);
  --surface-shadow:0 12px 45px rgba(15,23,42,.08);
  --surface-blur:14px;
  --surface-saturation:110%;

  --glass-bg:rgba(255,255,255,.62);
  --glass-border:rgba(15,23,42,.08);
  --glass-blur:12px;

  --bg-glass:rgba(255,255,255,.50);
  --bg-glass-hover:rgba(255,255,255,.68);
  --bg-glass-active:rgba(255,255,255,.80);

  --bg-filter:brightness(1.08) saturate(.96) contrast(.95);
  --hero-title-shadow:none;

  --content-surface-bg:rgba(255,255,255,.68);
  --content-surface-border:rgba(15,23,42,.10);
  --content-surface-shadow:0 12px 45px rgba(15,23,42,.08);
  --content-surface-blur:16px;

  /* Clean paper sheen (NO rainbow/prism) */
  --content-surface-sheen:
    radial-gradient(100% 80% at 80% 0%, rgba(60,100,100,.08) 0%, transparent 50%),
    radial-gradient(100% 80% at 20% 15%, rgba(100,80,140,.06) 0%, transparent 50%);
  --content-surface-sheen-opacity:.55;
  --content-surface-sheen-blend:soft-light;

  /* Card sheen: subtle paper highlight */
  --card-sheen:
    radial-gradient(100% 80% at 15% 0%, rgba(255,255,255,.35) 0%, transparent 55%);
  --card-sheen-opacity:.22;

  /* Section scrim (very light) */
  --section-scrim:
    radial-gradient(100% 70% at 80% 5%, rgba(60,100,100,.06) 0%, transparent 55%),
    radial-gradient(100% 70% at 25% 20%, rgba(100,80,140,.05) 0%, transparent 50%),
    linear-gradient(135deg, rgba(247,246,242,.55) 0%, rgba(247,246,242,.20) 50%, rgba(247,246,242,.08) 100%);

  /* Background overlay (REDUCED for BG visibility) */
  --bg-overlay:
    radial-gradient(80% 60% at 25% 15%, rgba(60,100,100,.08) 0%, transparent 50%),
    radial-gradient(80% 60% at 75% 10%, rgba(100,80,140,.06) 0%, transparent 50%),
    linear-gradient(135deg, rgba(247,246,242,.45) 0%, rgba(247,246,242,.18) 50%, rgba(247,246,242,.35) 100%);

  /* Overlay master opacity */
  --bg-overlay-opacity:0.28;

  --bg-noise-opacity:0.018;

  /* Nav: clean paper */
  --nav-hover-bg:rgba(255,255,255,.45);
  --nav-hover-border:rgba(60,100,100,.12);
  --nav-active-bg:rgba(60,100,100,.08);
  --nav-active-border:rgba(100,80,140,.12);

  --scrim-radial:radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.40) 100%);
  --glow-soft:0 0 14px rgba(60,100,100,.10);
  --glow-medium:0 0 22px rgba(100,80,140,.12);

  --map-water:#dff4ff; --map-land:#f6fbff; --map-participating:#7fd4e0; --map-hover:#46a6b6; --map-stroke:#9fb6c3;
  --marker-glow:rgba(11,107,122,.30); --marker-core:#0b6b7a; --marker-pulse:rgba(11,107,122,.18);
}

/* Theme transition */
html{transition:background-color var(--transition-theme),color var(--transition-theme);}
html.theme-transitioning,html.theme-transitioning *{
  transition:background-color var(--transition-theme),color var(--transition-theme),border-color var(--transition-theme),box-shadow var(--transition-theme)!important;
}

/* Dyslexia Mode (spacing unchanged, now applies OpenDyslexic) */
.dyslexia-mode{--leading-normal:1.8;--leading-relaxed:2;}
html.dyslexia-mode body{
  font-family:"OpenDyslexic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.05em;
  word-spacing:.12em;
  font-weight:450;
}
.dyslexia-mode p,.dyslexia-mode li,.dyslexia-mode td,.dyslexia-mode th{text-align:left!important;hyphens:none!important;}

/* High Contrast (unchanged behavior) */
.high-contrast{
  --text-primary:#fff;--text-secondary:#e2e8f0;--bg-page:#000;--bg-surface:#0a0a0a;--border-default:#fff;--color-link:#60a5fa;
}
.high-contrast[data-theme="light"]{
  --text-primary:#000;--text-secondary:#1e293b;--bg-page:#fff;--bg-surface:#f8fafc;--border-default:#000;
}

/* Reduced Motion (unchanged behavior) */
@media (prefers-reduced-motion:reduce){
  :root{--transition-fast:0ms;--transition-base:0ms;--transition-slow:0ms;--transition-theme:0ms;}
}
.reduce-motion,.reduce-motion *{
  --transition-fast:0ms!important;--transition-base:0ms!important;--transition-slow:0ms!important;--transition-theme:0ms!important;
  animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;
}