/* ============================================================================
   landing-base.css — the FOUNDATION-ONLY slice of style.css, for public
   marketing/legal pages ($leanHead) that must NOT pull the full 64 KB app
   stylesheet onto the render-blocking critical path.

   Contains exactly what those pages depend on: self-hosted fonts, the :root
   design tokens (incl. the z-index scale + accent vars), the dark-mode token
   overrides, and the base reset/body typography. The nav (lp-nav.php) and the
   notification system (notifications.php) carry their own inline <style>, and
   every landing section is styled by landing.css / lp-*.css — so nothing else
   from style.css is needed here.

   This is a deliberate MIRROR of style.css's top block (~lines 4–170). If you
   change a token, font, or base rule in style.css, mirror it here too.
   ========================================================================== */

/* ── Self-hosted fonts (only the two families public pages use) ── */
@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url('/assets/fonts/eb-garamond-400.woff2') format('woff2');
}
@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: fallback;
    src: url('/assets/fonts/eb-garamond-600.woff2') format('woff2');
}
@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: fallback;
    src: url('/assets/fonts/eb-garamond-400italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url('/assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: fallback;
    src: url('/assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: fallback;
    src: url('/assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: fallback;
    src: url('/assets/fonts/inter-700.woff2') format('woff2');
}

:root {
    /* Color Palette — White & Blue (light mode) */
    --bg-light:      #E2E8F0;    /* soft light blue-grey page */
    --bg-base:       #E2E8F0;    /* base page background (used by event/lore pages) */
    --bg-dark:       #1A1A1A;
    --text-light:    #181818;
    --text-dark:     #E8E8E8;
    --accent-primary:   #155999;
    --accent-secondary: #0A638A;
    --card-bg-light: #FFFFFF;    /* pure white cards */
    --card-bg-dark:  #252525;
    --border-light:  #D2DAE4;    /* cool blue-grey light border */
    --border-dark:   #3A3A3A;
    --shadow-light:  rgba(30, 41, 59, 0.10);
    --shadow-dark:   rgba(0, 0, 0, 0.3);
    --subnav-bg:     #D8E0EB;    /* slightly deeper blue-grey subnav strip */
    --accent-glow: rgba(21, 89, 153, 0.09);
    --accent-ring: rgba(21, 89, 153, 0.20);
    --accent-tint: rgba(21, 89, 153, 0.14);
    --btn-on-accent: #FAF8F3;

    /* ── Z-INDEX SCALE ── single source of truth for GLOBAL stacking layers.
       Mirror of style.css. Tiers are 100 apart; reference as var(--z-x, <n>). */
    --z-base:      0;    /* page content */
    --z-sticky:    100;  /* sticky toolbars, sub-nav, sticky table headers */
    --z-nav:       200;  /* fixed nav, sidebar, public bar, editor topbars */
    --z-dropdown:  300;  /* menus, kebabs, popovers, tooltips, autocompletes */
    --z-modal:     400;  /* modal & drawer overlays + panels */
    --z-coachmark: 500;  /* tutorial / walkthrough / help bubbles */
    --z-toast:     600;  /* notifications + confirm / prompt dialogs */
    --z-system:    700;  /* staging / dev bar, system banner — absolute top */
}

/* ── Dark mode: override light variables ── */
html.dark-mode {
    color-scheme: dark;
    --bg-light:      #1C1C1C;
    --bg-base:       #1C1C1C;
    --text-light:    #E8E6E0;
    --card-bg-light: #262626;
    --border-light:  #3C3C3C;
    --shadow-light:  rgba(0, 0, 0, 0.45);
    --accent-primary:     #00B3FF;
    --accent-secondary: #A6CDDD;
    --subnav-bg:       var(--card-bg-light);
    --accent-glow: rgba(0, 179, 255, 0.08);
    --accent-ring: rgba(0, 179, 255, 0.15);
    --accent-tint: rgba(0, 179, 255, 0.12);
    --btn-on-accent: #1a1a1a;
}

html { transition: background 0.3s; background: var(--bg-light); overscroll-behavior-x: none; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background: var(--bg-light);
    color: var(--text-light);
    transition: background 0.3s, color 0.3s;
    overscroll-behavior-x: none;
}

body.dark-mode {
    background: var(--bg-dark);
    color: var(--text-dark);
}

/* Typography */
h1, h2, h3, h4 {
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    font-weight: 600;
    line-height: 1.2;
}

h1 { font-size: 2.5rem; margin-bottom: 1rem; }
h2 { font-size: 2rem; margin-bottom: 0.8rem; }
h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }