:root {
    --primary: #2563eb;
    --brand: var(--primary);
    --brand-dark: #163a60;
    --secondary: #0f172a;
    --accent: var(--primary);
    --bg: #f5f7fb;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e6eaf1;
    --link: var(--primary);
    --surface: rgba(255, 255, 255, 0.82);
    --body-bg-top: #fafbfe;
    --hero-from: #0f1f37;
    --hero-via: #173a61;
    --hero-to: var(--primary);
    --hero-gradient: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-via) 45%, var(--hero-to) 100%);
    --radius: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* -----------------------------------------------------------------
       Brand-derived tints. Every storefront accent (eyebrow pill, soft
       button bg, focus ring, hover border, deep gradient stop, split
       auth panel, etc.) is computed from --brand so a single brand-color
       change cascades through the whole storefront. Falls back gracefully
       where color-mix is unavailable; downstream rules also pass safe
       defaults via var(..., fallback) where the loss would be visible.
    -------------------------------------------------------------------- */
    --brand-soft: color-mix(in srgb, var(--brand) 6%, #ffffff);
    --brand-soft-strong: color-mix(in srgb, var(--brand) 12%, #ffffff);
    --brand-line: color-mix(in srgb, var(--brand) 16%, #ffffff);
    --brand-line-strong: color-mix(in srgb, var(--brand) 30%, #ffffff);
    --brand-deep: color-mix(in srgb, var(--brand) 80%, #0b1220);
    --brand-darker: color-mix(in srgb, var(--brand) 55%, #0b1220);
    --brand-shadow: color-mix(in srgb, var(--brand) 22%, transparent);

    /* Subtle, layered shadows — hairline contact + soft ambient depth.
       Replaces the previous oversized single blurs for a crisper, more
       professional surface treatment. */
    --shadow-soft:
        0 1px 2px color-mix(in srgb, var(--text, #0f172a) 6%, transparent),
        0 6px 18px color-mix(in srgb, var(--text, #0f172a) 5%, transparent);
    --shadow-strong:
        0 2px 6px color-mix(in srgb, var(--text, #0f172a) 7%, transparent),
        0 20px 44px color-mix(in srgb, var(--text, #0f172a) 11%, transparent);
    --shadow-brand: 0 10px 22px var(--brand-shadow);
}