/* =============================================================================
   BodyPilot · Design Tokens
   Single source of truth — every page/component reads from here.
   ========================================================================= */

:root {
    /* Tell the browser which scheme our UI is built for — this changes
       the colour of native form widgets (date/time pickers, scrollbars,
       checkboxes), which would otherwise render in light-mode contrast
       against our dark surfaces and become unreadable. The light-mode
       override at the bottom of the file flips this back to "light". */
    color-scheme: dark;

    /* ── Surfaces ───────────────────────────────────────────────── */
    --surface-0: #0a0a0a;            /* page background, true black */
    --surface-1: #1f1f1f;            /* cards, containers */
    --surface-2: #2a2a2a;            /* elevated cards, active states */
    --surface-3: #353535;            /* inputs, hover */
    --surface-overlay: rgba(10, 10, 10, 0.85);

    /* ── Text ───────────────────────────────────────────────────── */
    --text-primary: #f5f5f5;
    --text-secondary: #a0a0a0;
    --text-tertiary: #7a7a7a;
    --text-inverse: #0a0a0a;

    /* ── Dividers ──────────────────────────────────────────────── */
    --divider-subtle: #2a2a2a;
    --divider-strong: #3a3a3a;

    /* ── Macro / Domain Colors ─────────────────────────────────── */
    /* Each macro/domain has its own hue so the legend, rings, and dim
       variants can never collapse into a single colour. Protein moved to
       violet (was duplicate of --kcal), water moved to teal (same), fat
       moved into pink-magenta to clear the warning/danger reds, carbs
       slightly de-saturated to stop flickering on the dark surface. */
    --kcal: #35C8FF;
    --kcal-dim: #35C8FF33;
    --carbs: #9EE832;
    --carbs-dim: #9EE83233;
    --protein: #A78BFA;
    --protein-dim: #A78BFA33;
    --fat: #FF5A8C;
    --fat-dim: #FF5A8C33;
    --water: #4FB8E0;
    --streak: #FF8A35;

    /* ── Semantic ──────────────────────────────────────────────── */
    --success: #30D158;
    --warning: #FFD60A;
    --danger: #FF453A;
    --info: #0A84FF;

    /* ── Typography ────────────────────────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont,
                 "SF Pro Display", "Inter", "Segoe UI", sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;

    --text-hero: 40px;
    --text-large: 22px;
    --text-medium: 16px;
    --text-body: 15px;
    --text-small: 13px;
    --text-micro: 11px;
    --text-label: 10px;

    --weight-regular: 400;
    --weight-medium: 500;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-uppercase: 0.18em;
    --tracking-uppercase-tight: 0.10em;

    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;

    /* ── Spacing (4px-base) ────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ── Radii ─────────────────────────────────────────────────── */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ── Motion ────────────────────────────────────────────────── */
    --duration-instant: 80ms;
    --duration-fast: 150ms;
    --duration-base: 240ms;
    --duration-slow: 400ms;
    --duration-ring: 800ms;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Focus & Z-Index ───────────────────────────────────────── */
    --focus-ring: 0 0 0 2px #35C8FF;

    --z-base: 0;
    --z-sticky: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;
}

/* =============================================================================
   Light Mode — overrides only the tokens that differ from the dark default.
   Two activation paths:
     1. `:root[data-theme="light"]`        — explicit user choice (Profile UI)
     2. `prefers-color-scheme: light` AND  — OS preference, BUT only when the
        `:root:not([data-theme="dark"])`     user hasn't explicitly chosen dark
   Macros are darkened so they stay AA-readable on a white surface.
   ========================================================================= */
/* Light palette is duplicated across two rules because @media + custom-prop
   overrides can't be safely combined via :is(). Same tokens — different
   activation gate. Keep them in sync. */
:root[data-theme="light"] {
    color-scheme: light;
    --surface-0: #ffffff;
    --surface-1: #f7f7f8;
    --surface-2: #eeeeef;
    --surface-3: #e3e3e5;
    --surface-overlay: rgba(255, 255, 255, 0.88);

    --text-primary: #0a0a0a;
    --text-secondary: #5a5a5a;
    --text-tertiary: #8a8a8a;
    --text-inverse: #f5f5f5;

    --divider-subtle: #e8e8ea;
    --divider-strong: #d0d0d3;

    --kcal: #0A95C2;     --kcal-dim: #0A95C233;
    --carbs: #65A30D;    --carbs-dim: #65A30D33;
    --protein: #7C3AED;  --protein-dim: #7C3AED33;
    --fat: #DB2777;      --fat-dim: #DB277733;
    --water: #0284C7;
    --streak: #EA580C;

    --success: #15803D;
    --warning: #B45309;
    --danger: #DC2626;
    --info: #1D4ED8;

    --focus-ring: 0 0 0 2px #0A95C2;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) {
        color-scheme: light;
        --surface-0: #ffffff;
        --surface-1: #f7f7f8;
        --surface-2: #eeeeef;
        --surface-3: #e3e3e5;
        --surface-overlay: rgba(255, 255, 255, 0.88);

        --text-primary: #0a0a0a;
        --text-secondary: #5a5a5a;
        --text-tertiary: #8a8a8a;
        --text-inverse: #f5f5f5;

        --divider-subtle: #e8e8ea;
        --divider-strong: #d0d0d3;

        --kcal: #0A95C2;     --kcal-dim: #0A95C233;
        --carbs: #65A30D;    --carbs-dim: #65A30D33;
        --protein: #7C3AED;  --protein-dim: #7C3AED33;
        --fat: #DB2777;      --fat-dim: #DB277733;
        --water: #0284C7;
        --streak: #EA580C;

        --success: #15803D;
        --warning: #B45309;
        --danger: #DC2626;
        --info: #1D4ED8;

        --focus-ring: 0 0 0 2px #0A95C2;
    }
}