/*
 * Design tokens for ClassQR Global's PUBLIC pages (home, guides, policy, login/register, exam library, center
 * defaults). Loaded first in every public layout so home.css / center.css / inline SiteTheme vars can reference
 * or override these with var(). Aesthetic: minimal international SaaS (Linear / Notion / Stripe) — light surface,
 * one accent, thin hairline borders, moderate radii, no gradients, no heavy shadows.
 *
 * Center pages (Views/Center/**, center.css) keep their own white-label contract: --cq-indigo / --cq-on-primary /
 * --cq-brand-ink / --cq-radius* / --cq-font-* are set per organization by Models/SiteTheme.cs and must keep winning
 * the cascade (their <style> block is printed after this file in _LayoutCenter). Everything below is the platform
 * default and the fallback those per-org variables replace.
 */
:root {
    /* ---------- Font ---------- */
    --cq-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ---------- Color: neutral ramp (tinted toward the brand hue, not pure gray) ---------- */
    --cq-bg: #fbfbfe;
    --cq-surface: #ffffff;
    --cq-surface-muted: #f6f6fb;
    --cq-border: #e6e5f0;
    --cq-border-strong: #d7d5e8;
    --cq-ink: #1b1830;
    --cq-muted: #6b6880;
    --cq-muted-2: #8b88a6;

    /* ---------- Color: brand accent (kept — ClassQR's own indigo, not a template pick) ---------- */
    --cq-accent: #4b44b8;
    --cq-accent-hover: #3d37a0;
    --cq-accent-soft: #f1f0ff;
    --cq-on-accent: #ffffff;
    /* Alias for the platform-gateway pages (Views/PublicCatalog/**) that still read var(--cq-indigo, #4b44b8) —
       keeps them in sync with --cq-accent above without editing those views. Not used on Center pages: there
       --cq-indigo is the per-organization brand color set by Models/SiteTheme.cs, which must keep winning. */
    --cq-indigo: var(--cq-accent);

    /* ---------- Color: semantic ---------- */
    --cq-success: #16a34a;
    --cq-success-soft: #e7f7ec;
    --cq-danger: #dc2626;
    --cq-danger-soft: #fdecec;
    --cq-warning: #b45309;
    --cq-warning-soft: #fff7ed;

    /* ---------- Radii (moderate — cards top out at 16px, no pill-everything) ---------- */
    --cq-radius-sm: 8px;
    --cq-radius: 10px;
    --cq-radius-lg: 16px;
    --cq-radius-pill: 999px;

    /* ---------- Spacing (4pt scale) ---------- */
    --cq-space-1: 4px;
    --cq-space-2: 8px;
    --cq-space-3: 12px;
    --cq-space-4: 16px;
    --cq-space-5: 24px;
    --cq-space-6: 32px;
    --cq-space-7: 48px;
    --cq-space-8: 64px;
    --cq-space-9: 96px;

    /* ---------- Shadows: one depth strategy (hairline border first; shadow only for floating layers) ---------- */
    --cq-shadow-sm: 0 1px 2px rgba(27, 24, 48, .05);
    --cq-shadow-md: 0 8px 24px rgba(27, 24, 48, .08);
    --cq-shadow-lg: 0 16px 40px rgba(27, 24, 48, .12);

    /* ---------- Motion ---------- */
    --cq-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Auto dark mode (OS preference only — no manual toggle). Neutral ramp flips; the brand accent stays the same hue,
   lightened slightly so it still passes contrast on the darker surface. Center pages intentionally do not opt into
   this (org branding is fixed by the organization, see center.css). */
@media (prefers-color-scheme: dark) {
    :root {
        --cq-bg: #15132a;
        --cq-surface: #1b1830;
        --cq-surface-muted: #211e3b;
        --cq-border: #322e52;
        --cq-border-strong: #3d3960;
        --cq-ink: #f1f0f9;
        --cq-muted: #b3b0c9;
        --cq-muted-2: #9490ac;
        --cq-accent: #8a83f0;
        --cq-accent-hover: #a29bfa;
        --cq-accent-soft: #2a2650;
        --cq-on-accent: #15132a;
        --cq-success-soft: #123320;
        --cq-danger-soft: #3a1414;
        --cq-warning-soft: #3a2408;
        --cq-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
        --cq-shadow-md: 0 8px 24px rgba(0, 0, 0, .4);
        --cq-shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
    }
}