/**
 * tokens.css: the single shared design-token root.
 * See docs/DESIGN-SYSTEM.md
 * Brand palette:
 * https://coolors.co/316c29-b4ccc6-1d2e23-74bb50-263934
 * #316C29 Fern Green · #B4CCC6 Ash Gray · #1D2E23 Dark Green · #74BB50 Mantis
 * #263934 Dark Slate Gray · #FFFFFF White
 */

:root {
    /* ------------------------------------------------------------------ *
     * Color: mirrors the historical `--color-*` set from index.css.
     * (index.css still defines its own copy for now; values are identical
     * and it loads after this file. De-duplication is future work.)
     * ------------------------------------------------------------------ */
    --color-bg: #FAFAFA;
    --color-surface: #FFFFFF;
    --color-surface-soft: #f4f4f4;
    --color-text: #1D2E23;
    --color-border: #ccc;
    --color-border-soft: #ddd;
    --color-hover-bg: #e9e9e9;
    --color-link: #316C29;
    --color-link-hover: #1D2E23;
    --color-accent: #316C29;
    --color-accent-hover: #74BB50;
    --color-danger-bg: #f8d7da;   --color-danger-text: #721c24;  --color-danger-border: #f5c6cb;
    --color-success-bg: #d4edda;  --color-success-text: #155724; --color-success-border: #c3e6cb;
    --color-info-bg: #f0f8ff;     --color-info-text: #004085;    --color-info-border: #b8daff;

    /* Gap-fillers. See DESIGN-SYSTEM.md §2. */
    --color-text-muted: #65746e;    /* de-emphasized body text, meta lines */
    --color-text-subtle: #8a968f;   /* fainter still — placeholder, disabled label */
    --color-accent-contrast: #ffffff;   /* text/icon on an accent-filled surface */
    --color-warning-bg: #fff3cd;  --color-warning-text: #8a5a00; --color-warning-border: #ffe69c;
    --color-focus-ring: #74BB50;    /* :focus-visible outline color */

    /* ------------------------------------------------------------------ *
     * Spacing scale: replaces the ~40 distinct raw rem values in use.
     * Round to the nearest step when migrating; exact parity not required.
     * ------------------------------------------------------------------ */
    --space-3xs: 0.125rem;   /* hairline nudges */
    --space-2xs: 0.25rem;    /* icon gaps */
    --space-xs: 0.5rem;      /* tight padding, input padding */
    --space-sm: 0.75rem;     /* compact component padding */
    --space-md: 1rem;        /* default gap / padding */
    --space-lg: 1.5rem;      /* section inner spacing */
    --space-xl: 2rem;        /* between form groups (current .group margin) */
    --space-2xl: 3rem;       /* page section separation */

    /* ------------------------------------------------------------------ *
     * Typography: always use rem, never px, for font-size in new rules.
     * ------------------------------------------------------------------ */
    --font-sans: "Jost", Arial, sans-serif;
    --font-mono: "Fira Mono", Menlo, Consolas, monospace;

    --text-xs: 0.75rem;      /* fine print, table meta */
    --text-sm: 0.85rem;      /* secondary text (current most-common) */
    --text-base: 1rem;       /* body */
    --text-lg: 1.15rem;      /* lead paragraph */
    --text-xl: 1.5rem;       /* h2 */
    --text-2xl: 2rem;        /* h1 */

    --leading-tight: 1.25;   /* headings */
    --leading-normal: 1.6;   /* body */

    /* ------------------------------------------------------------------ *
     * Radius: pill shapes must use --radius-pill, not 5em / 2em / 99px.
     * ------------------------------------------------------------------ */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Compat alias for storefront.css's legacy `--border-radius`. Storefront
       still self-defines the same value for now; this keeps them in sync once
       storefront pages pick up tokens.css. */
    --border-radius: var(--radius-md);

    /* ------------------------------------------------------------------ *
     * Elevation
     * ------------------------------------------------------------------ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .16);

    /* ------------------------------------------------------------------ *
     * Motion: same intent is currently spelled 8 ways; collapse to these.
     * ------------------------------------------------------------------ */
    --motion-fast: 120ms;
    --motion-base: 160ms;   /* current most-common */
    --motion-slow: 240ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
}

[data-theme="dark"] {
    --color-bg: #14201a;
    --color-surface: #1c2620;
    --color-surface-soft: #222f28;
    --color-text: #e3ece6;
    --color-border: #3a463e;
    --color-border-soft: #2c3a33;
    --color-hover-bg: #263a30;
    --color-link: #8fd66c;
    --color-link-hover: #b9e79c;
    --color-accent: #316C29;
    --color-accent-hover: #74BB50;
    --color-danger-bg: #3b1418;   --color-danger-text: #f1a8ae;  --color-danger-border: #5c2530;
    --color-success-bg: #16301f;  --color-success-text: #8fd6a0; --color-success-border: #2c5c3b;
    --color-info-bg: #16232f;     --color-info-text: #8ec2f5;    --color-info-border: #2d4a63;

    /* Gap-fillers, dark variants. */
    --color-text-muted: #9aa8a1;
    --color-text-subtle: #7c8a83;
    --color-accent-contrast: #ffffff;
    --color-warning-bg: #3a2e12;  --color-warning-text: #e8c26a; --color-warning-border: #5c4a1f;
    --color-focus-ring: #8fd66c;

    /* Shadows read as near-invisible over a dark ground at light-mode alpha;
       deepen them so elevation is still legible. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .6);
}