/**
 * Basket design tokens.
 *
 * Bold big-box retail: a clean white canvas, hairline borders, rounded
 * 16px cards and pill controls, a punchy accent, a yellow deal chip and
 * a green savings colour. Gabarito display over a Nunito Sans body.
 *
 * Static per-preset values keyed on [data-ec-preset][data-color-scheme];
 * dynamic values (accent triplet, container width, grid density, font
 * pairing and radius overrides) are injected inline at runtime by the
 * framework's TokenCompiler and win the cascade by order.
 *
 * The four presets share the white/ink surfaces and differ only in accent:
 * Red (default), Blue, Green, Orange. The default dark scheme is keyed on
 * :root[data-color-scheme="dark"] so an unset or unknown preset slug still
 * gets a correct dark scheme; the named presets override after by source
 * order.
 *
 * Basket extras (not in the standard set): --ec-deal / --ec-deal-fg (the
 * yellow flash-deal chip and promo bar) and --ec-save / --ec-save-soft
 * (the green savings / in-stock affirmative).
 */

:root {
    /* Defaults: Red on white. */
    --ec-bg: #ffffff;
    --ec-surface: #ffffff;
    --ec-surface-2: #f4f5f8;
    --ec-fg: #1f2126;
    --ec-fg-2: #5f6673;
    --ec-border: #e5e7ec;
    --ec-accent: #d7263d;
    --ec-accent-fg: #ffffff;
    --ec-accent-soft: color-mix(in oklab, var(--ec-accent) 9%, white);

    /* Basket retail extras. */
    --ec-deal: #ffd23f;
    --ec-deal-fg: #4a3800;
    --ec-save: #1e8a4c;
    --ec-save-soft: color-mix(in oklab, var(--ec-save) 10%, white);

    --ec-radius: 16px;
    --ec-btn-radius: 999px;
    --ec-img-radius: 12px;
    --ec-shadow: 0 14px 30px -14px rgba(24, 28, 38, 0.22);

    --ec-font-display: 'Gabarito', 'Nunito Sans', system-ui, -apple-system, sans-serif;
    --ec-font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ec-disp-weight: 800;
    --ec-disp-style: normal;
    --ec-disp-tracking: -0.03em;
    --ec-disp-transform: none;

    --ec-cw: 1440px;
    --ec-gut: 2rem;
    --ec-sect-y: 4.5rem;
    --ec-grid: 4;
    --ec-grid-gap: 1.25rem;

    --ec-dur-1: 150ms;
    --ec-dur-2: 250ms;
    --ec-dur-3: 400ms;
    --ec-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The default dark scheme, whatever the preset slug says. The design is
   light-only, so this is a considered dark retail palette. */
:root[data-color-scheme="dark"] {
    --ec-bg: #14161a;
    --ec-surface: #1c1f24;
    --ec-surface-2: #23272e;
    --ec-fg: #eef0f4;
    --ec-fg-2: #a2a9b6;
    --ec-border: #2e333b;
    --ec-accent: #f2536a;
    --ec-accent-fg: #ffffff;
    /* The base accent-soft mixes into white, so redefine it into the dark
       surface (like --ec-save-soft) or it renders as a near-white block. */
    --ec-accent-soft: color-mix(in oklab, var(--ec-accent) 20%, #1c1f24);

    --ec-deal: #ffd23f;
    --ec-deal-fg: #4a3800;
    --ec-save: #39b06a;
    --ec-save-soft: color-mix(in oklab, var(--ec-save) 20%, #1c1f24);

    --ec-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6);
}

/* Blue accent on the same surfaces. */
[data-ec-preset="blue"] {
    --ec-accent: #1466c8;
    --ec-accent-fg: #ffffff;
}

[data-ec-preset="blue"][data-color-scheme="dark"] {
    --ec-accent: #4b90e6;
    --ec-accent-fg: #ffffff;
}

/* Green accent. */
[data-ec-preset="green"] {
    --ec-accent: #1e8a4c;
    --ec-accent-fg: #ffffff;
}

[data-ec-preset="green"][data-color-scheme="dark"] {
    --ec-accent: #39b06a;
    --ec-accent-fg: #ffffff;
}

/* Orange accent. */
[data-ec-preset="orange"] {
    --ec-accent: #e86a10;
    --ec-accent-fg: #ffffff;
}

[data-ec-preset="orange"][data-color-scheme="dark"] {
    --ec-accent: #ff8c3a;
    --ec-accent-fg: #ffffff;
}

/* Motion is opt-out at the token layer. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ec-dur-1: 0ms;
        --ec-dur-2: 0ms;
        --ec-dur-3: 0ms;
    }
}