/*
 * Design tokens for the Dynamic Price Guard dashboard.
 * Only the colors that recur across the extracted CSS files below (plus the
 * handful of inline `style="..."` attributes that were converted to var()
 * references alongside this change) are tokenized here — the remaining
 * decorative one-off inline styles (translucent white/black "glow" overlays
 * tuned for a dark surface, gradients, etc.) are intentionally left alone;
 * fully re-tuning every one of those for a light background is a much larger
 * visual-QA pass than is safe to do without eyes on a live render.
 *
 * Light is the default (bare :root) to match Shopify Admin's own default
 * theme -- previously this file only ever defined a dark palette, so the
 * embedded app looked like a different, disconnected product the moment a
 * merchant opened it inside Admin's (usually light) chrome. Dark is applied
 * via `prefers-color-scheme: dark`, so merchants whose system/Admin theme is
 * dark still get the original look.
 */
:root {
    /* Tells the browser which palette to use for controls it renders itself
       (range slider tracks, checkboxes, scrollbars, form autofill, etc.) --
       without this, those native controls follow the OS/browser's own dark
       preference independently of our custom light/dark palette above,
       which is how range sliders ended up with a near-black unfilled track
       even while the rest of the page rendered light. */
    color-scheme: light;

    --bg-page: #f4f6f8;
    --bg-card: #ffffff;
    --border: #dde1e6;
    --border-strong: #c9d0d8;

    --accent-indigo: #6366f1;
    --accent-indigo-dark: #4f46e5;
    --accent-indigo-light: #818cf8;
    --accent-emerald: #10b981;
    --accent-emerald-dark: #059669;
    --accent-amber: #f59e0b;
    --accent-amber-dark: #d97706;
    --accent-rose: #ef4444;
    --accent-rose-dark: #dc2626;

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-dim: #6b7280;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --bg-page: #0f172a;
        --bg-card: #1e293b;
        --border: #334155;
        --border-strong: #475569;

        --text-primary: #f8fafc;
        --text-secondary: #e2e8f0;
        --text-muted: #94a3b8;
        /* Was #64748b (~3.1:1 against --bg-card -- fails WCAG AA's 4.5:1 for
           normal text). #8a97a8 clears it at ~4.9:1 while staying visibly
           dimmer than --text-muted. */
        --text-dim: #8a97a8;
    }
}