/*
 * 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 (slate tinted toward the navy brand, not pure gray) ---------- */
    --cq-bg: #fafbfd;
    --cq-surface: #ffffff;
    --cq-surface-muted: #f4f7fb;
    --cq-border: #e3e8ef;
    --cq-border-strong: #cfd8e3;
    --cq-ink: #14213d;
    --cq-muted: #5b6578;
    --cq-muted-2: #8a94a6;

    /* ---------- Color: brand (same palette as classqr.vn: navy, blue, orange; flat, no gradients) ----------
       The indigo/purple used before read as a generic AI/SaaS template, so the public pages moved to this palette.
       Logo: images/logo-navy.png. */
    --cq-navy: #0e3a6b;
    --cq-orange: #f07c1e;
    --cq-accent: #1c64c8;
    --cq-accent-hover: #1652a6;
    --cq-accent-soft: #e8f1fc;
    --cq-on-accent: #ffffff;
    /* Alias for the platform-gateway pages (Views/PublicCatalog/**) that still read var(--cq-indigo, ...) —
       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(20, 33, 61, .05);
    --cq-shadow-md: 0 8px 24px rgba(20, 33, 61, .08);
    --cq-shadow-lg: 0 16px 40px rgba(20, 33, 61, .12);

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

/* Public pages stay light whatever the device's theme, like the marketing sites of Kahoot, Wayground or Google
   Classroom: the clips, logo and center branding are made for a light page. Form controls and scrollbars follow. */
:root { color-scheme: light; }