/**
 * Ghasla intro tokens — readable light mode first.
 */
:root {
    --neo-bg: #f4f7fb;
    --neo-surface: #ffffff;
    --neo-surface-2: #eef2f6;
    --neo-border: rgba(15, 23, 42, 0.1);
    --neo-border-strong: rgba(15, 23, 42, 0.16);
    --neo-accent: #0f766e;
    --neo-accent-hover: #0d9488;
    --neo-secondary: #0284c7;
    --neo-text: #0f172a;
    --neo-muted: #334155;
    --neo-radius: 12px;
    --neo-radius-sm: 8px;
    --neo-card-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.06);
    --neo-nav-floating: 0 8px 28px rgba(15, 23, 42, 0.08);

    --intro-bg: #f4f7fb;
    --intro-bg-muted: #eef2f6;
    --intro-surface: #ffffff;
    --intro-surface-hover: #f8fafc;
    --intro-text: #0f172a;
    --intro-heading: #020617;
    --intro-muted: #334155;
    --intro-muted-strong: #1e293b;
    --intro-border: rgba(15, 23, 42, 0.1);
    --intro-radius-sm: var(--neo-radius-sm);
    --intro-radius-md: var(--neo-radius);
    --intro-radius-lg: 20px;
    --intro-shadow: var(--neo-card-shadow);
    --intro-shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.1);
    --intro-header-h: 80px;
    --intro-glass: rgba(255, 255, 255, 0.92);
    --intro-accent: #0f766e;
    --intro-accent-strong: #0d9488;
    --intro-accent-soft: rgba(15, 118, 110, 0.12);
    --intro-success: #059669;
    --intro-info: #0284c7;

    --lp-grad-primary: linear-gradient(135deg, #0e7490 0%, #0f766e 100%);
    --lp-grad-secondary: linear-gradient(135deg, #0284c7 0%, #155e75 100%);
    --lp-success: #059669;
    --lp-warning: #d97706;
    --lp-info: #0284c7;
    --lp-glow-blue: rgba(14, 165, 233, 0.1);
    --lp-glow-purple: rgba(15, 118, 110, 0.08);
    --lp-glow-cyan: rgba(6, 182, 212, 0.08);

    --wu-display: "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --wu-body: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif;
    --wu-ease: cubic-bezier(0.22, 1, 0.36, 1);
    color-scheme: light;
}

html[data-intro-theme="dark"] {
    --neo-bg: #0b1216;
    --neo-surface: #121a20;
    --neo-surface-2: #182229;
    --neo-border: rgba(255, 255, 255, 0.08);
    --neo-border-strong: rgba(255, 255, 255, 0.14);
    --neo-accent: #2dd4bf;
    --neo-accent-hover: #5eead4;
    --neo-secondary: #22d3ee;
    --neo-text: #f1f5f9;
    --neo-muted: #cbd5e1;
    --neo-card-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
    --neo-nav-floating: 0 10px 36px rgba(0, 0, 0, 0.4);

    --intro-bg: var(--neo-bg);
    --intro-bg-muted: var(--neo-surface-2);
    --intro-surface: var(--neo-surface);
    --intro-surface-hover: #1a242c;
    --intro-text: #f1f5f9;
    --intro-heading: #ffffff;
    --intro-muted: #cbd5e1;
    --intro-muted-strong: #e2e8f0;
    --intro-border: var(--neo-border);
    --intro-glass: rgba(12, 18, 22, 0.86);
    --intro-accent: #2dd4bf;
    --intro-accent-strong: #5eead4;
    --intro-accent-soft: rgba(45, 212, 191, 0.16);
    --intro-shadow: var(--neo-card-shadow);
    --intro-shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.45);
    --lp-glow-blue: rgba(34, 211, 238, 0.12);
    --lp-glow-purple: rgba(45, 212, 191, 0.1);
    --lp-glow-cyan: rgba(6, 182, 212, 0.1);
    color-scheme: dark;
}