/* ============================================================================
   iDrive — shared design tokens (light + dark)
   ONE home for the tokens every page shares: the landing (site.css), the
   account portal and its return / mock pages (account.css), and the static
   pages (legal.css). Load it FIRST, before the page's own stylesheet. A token
   only one page uses stays in that page's file.

   Design language — the native app's blue brand (apps/mobile theme.ts:
   primary #0086DB / marketing #0A7CD8), a cool light ground, white cards on
   soft blue-tinted shadows. Dark mode is derived from the app's dark theme
   (background #0F1419, surface #1D1F23, dark primary #8ECEFF).

   Theme: the OS setting applies unless the visitor chose one; the choice is
   data-theme on <html> (localStorage 'idrive-theme', applied before first
   paint by each page's inline script). Two guards below: the OS dark setting
   applies unless the visitor chose light; an explicit data-theme="dark"
   always wins.
   ============================================================================ */

:root {
    /* Brand (iDrive blue) */
    --brand: #0A7CD8;
    --brand-600: #0A6AC0;
    --brand-700: #075CA6;
    --brand-400: #39A0EB;
    --brand-050: #EDF5FD;
    --brand-100: #D8EAFB;
    --brand-glow: rgba(10, 124, 216, 0.28);
    --brand-grad: linear-gradient(135deg, #2EA7F2 0%, #0A7CD8 48%, #0A5BBE 100%);
    --brand-grad-soft: linear-gradient(160deg, #EDF6FE 0%, #DCEBFB 100%);

    /* Ink */
    --ink: #0E1A2B;
    --ink-soft: #52616F;
    --ink-faint: #8A96A4;

    /* Surfaces — cool, premium light ground */
    --bg: #EEF3F9;
    --bg-2: #F5F8FC;
    --surface: #FFFFFF;
    --surface-2: #F7FAFD;

    /* UI chrome */
    --glass: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.8);
    --chip-bg: rgba(13, 30, 55, 0.045);
    --chip-bg-hover: rgba(13, 30, 55, 0.09);
    --neutral-chip: rgba(13, 30, 55, 0.06);
    --halo: rgba(10, 124, 216, 0.24);

    /* Semantic */
    --ok: #12855A;
    --ok-tint: #E2F5EC;
    --ok-line: rgba(18, 133, 90, 0.22);
    --warn: #C86A18;
    --warn-ink: #8A4A18;
    --warn-tint: #FDEEDD;
    --warn-line: rgba(200, 106, 24, 0.26);
    --accent: #FF7A50;
    --danger: #C0392B;

    /* Lines */
    --line: rgba(13, 30, 55, 0.08);
    --line-strong: rgba(13, 30, 55, 0.15);

    /* Shadows — layered, cool-tinted */
    --shadow-xs: 0 1px 2px rgba(13, 30, 55, 0.05);
    --shadow-sm: 0 1px 2px rgba(13, 30, 55, 0.04), 0 3px 10px rgba(13, 30, 55, 0.06);
    --shadow-md: 0 2px 6px rgba(13, 30, 55, 0.05), 0 14px 34px rgba(13, 30, 55, 0.09);
    --shadow-lg: 0 10px 30px rgba(10, 60, 120, 0.12), 0 36px 70px rgba(10, 60, 120, 0.16);
    --shadow-brand: 0 10px 24px -6px var(--brand-glow);

    /* Radii */
    --r-xs: 10px;
    --r-sm: 14px;
    --r-md: 18px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Site frame — the shared header's inner width and side gutter. The landing's .container uses the
       same two values, so the logo and the page content start on one line on every page. */
    --site-maxw: 1160px;
    --site-gutter: 16px;
    --site-header-h: 64px;
}
@media (min-width: 600px) { :root { --site-gutter: 24px; } }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand: #4AA8EE; --brand-600: #3A98DE; --brand-700: #8ECEFF; --brand-400: #39A0EB;
        --brand-050: rgba(142, 206, 255, 0.12); --brand-100: rgba(142, 206, 255, 0.22);
        --brand-glow: rgba(74, 168, 238, 0.4);
        --brand-grad: linear-gradient(135deg, #39A0EB 0%, #0A7CD8 55%, #0A5BBE 100%);
        --brand-grad-soft: linear-gradient(160deg, #192737 0%, #121d28 100%);
        --ink: #E6E8EC; --ink-soft: #BFC6CC; --ink-faint: #8A9296;
        --bg: #0F1419; --bg-2: #161b21; --surface: #1D1F23; --surface-2: #262A30;
        --ok: #43C892; --ok-tint: rgba(18, 133, 90, 0.22); --ok-line: rgba(67, 200, 146, 0.3);
        --warn: #E7A450; --warn-ink: #E7A450; --warn-tint: rgba(200, 106, 24, 0.2); --warn-line: rgba(231, 164, 80, 0.32);
        --danger: #FF6B5E;
        --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.17);
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 36px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
        --shadow-brand: 0 10px 24px -6px rgba(10, 90, 180, 0.55);
        --glass: rgba(29, 31, 35, 0.72); --glass-border: rgba(255, 255, 255, 0.08);
        --chip-bg: rgba(255, 255, 255, 0.07); --chip-bg-hover: rgba(255, 255, 255, 0.14);
        --neutral-chip: rgba(255, 255, 255, 0.08);
        --halo: rgba(74, 168, 238, 0.28);
    }
}
:root[data-theme="dark"] {
    --brand: #4AA8EE; --brand-600: #3A98DE; --brand-700: #8ECEFF; --brand-400: #39A0EB;
    --brand-050: rgba(142, 206, 255, 0.12); --brand-100: rgba(142, 206, 255, 0.22);
    --brand-glow: rgba(74, 168, 238, 0.4);
    --brand-grad: linear-gradient(135deg, #39A0EB 0%, #0A7CD8 55%, #0A5BBE 100%);
    --brand-grad-soft: linear-gradient(160deg, #192737 0%, #121d28 100%);
    --ink: #E6E8EC; --ink-soft: #BFC6CC; --ink-faint: #8A9296;
    --bg: #0F1419; --bg-2: #161b21; --surface: #1D1F23; --surface-2: #262A30;
    --ok: #43C892; --ok-tint: rgba(18, 133, 90, 0.22); --ok-line: rgba(67, 200, 146, 0.3);
    --warn: #E7A450; --warn-ink: #E7A450; --warn-tint: rgba(200, 106, 24, 0.2); --warn-line: rgba(231, 164, 80, 0.32);
    --danger: #FF6B5E;
    --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.17);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 36px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
    --shadow-brand: 0 10px 24px -6px rgba(10, 90, 180, 0.55);
    --glass: rgba(29, 31, 35, 0.72); --glass-border: rgba(255, 255, 255, 0.08);
    --chip-bg: rgba(255, 255, 255, 0.07); --chip-bg-hover: rgba(255, 255, 255, 0.14);
    --neutral-chip: rgba(255, 255, 255, 0.08);
    --halo: rgba(74, 168, 238, 0.28);
}