/**
 * Meridian design tokens.
 *
 * Warm editorial commerce: a soft cream canvas, white surfaces, hairline
 * borders, rounded cards and pill buttons. Bricolage Grotesque display
 * over a Figtree body, with uppercase letter-spaced micro-labels.
 *
 * 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 cream/ink surfaces and differ only in accent:
 * Copper (default), Forest, Azure, Plum. 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.
 */

:root {
    /* Defaults: Copper on cream. */
    --ec-bg: #faf8f5;
    --ec-surface: #ffffff;
    --ec-surface-2: #f1ede5;
    --ec-fg: #1c1813;
    --ec-fg-2: #6e675c;
    --ec-border: #e7e1d7;
    --ec-accent: #b7592e;
    --ec-accent-fg: #ffffff;
    --ec-accent-soft: color-mix(in oklab, var(--ec-accent) 10%, transparent);

    /* Meridian extra: stock / in-stock affirmative green. */
    --ec-ok: oklch(0.55 0.12 155);

    --ec-radius: 14px;
    --ec-btn-radius: 999px;
    --ec-img-radius: 14px;
    --ec-shadow: 0 20px 40px -18px rgba(28, 22, 14, 0.25);

    --ec-font-display: 'Bricolage Grotesque', 'Figtree', system-ui, -apple-system, sans-serif;
    --ec-font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ec-disp-weight: 600;
    --ec-disp-style: normal;
    --ec-disp-tracking: -0.02em;
    --ec-disp-transform: none;

    --ec-cw: 1280px;
    --ec-gut: 1.5rem;
    --ec-sect-y: 5rem;
    --ec-grid: 3;
    --ec-grid-gap: 1.5rem;

    --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. */
:root[data-color-scheme="dark"] {
    --ec-bg: #161310;
    --ec-surface: #1e1a15;
    --ec-surface-2: #252017;
    --ec-fg: #f2eee7;
    --ec-fg-2: #a69d90;
    --ec-border: #2f2a23;
    --ec-accent: #c56a3e;
    --ec-accent-fg: #ffffff;

    --ec-ok: oklch(0.75 0.12 155);

    --ec-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6);
}

/* Forest: deep green accent on the same cream surfaces. */
[data-ec-preset="forest"] {
    --ec-accent: #3f6e5a;
    --ec-accent-fg: #ffffff;
}

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

/* Azure: confident blue accent. */
[data-ec-preset="azure"] {
    --ec-accent: #3a5fa8;
    --ec-accent-fg: #ffffff;
}

[data-ec-preset="azure"][data-color-scheme="dark"] {
    --ec-accent: #5075be;
    --ec-accent-fg: #ffffff;
}

/* Plum: muted mauve accent. */
[data-ec-preset="plum"] {
    --ec-accent: #7c4a6b;
    --ec-accent-fg: #ffffff;
}

[data-ec-preset="plum"][data-color-scheme="dark"] {
    --ec-accent: #96607f;
    --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;
    }
}