/* Design tokens for supdec.graphics — slice S0 of REDESIGN-PLAN.md.
 *
 * This file declares custom properties and nothing else. It sets no property on
 * any element, so loading it changes nothing on screen: that is the acceptance
 * criterion for this slice, and it is verified by comparing computed styles
 * before and after rather than by assuming.
 *
 * Why a token layer at all: style.css is 234 KB across 13,178 lines with 47
 * distinct breakpoints, 82 !important declarations and 14 custom properties -
 * which is to say no shared vocabulary. Every later slice replaces one
 * component's hard-coded values with the names below and deletes its old rules.
 * Nothing is rewritten wholesale.
 *
 * Values are taken from what the site already is, not from taste. The palette
 * is near-monochrome because the product is graphics on a car and the interface
 * should get out of their way; 5px is the radius used 30 times in style.css;
 * Lato is what is actually loaded.
 *
 * Full rationale and the component specifications: docs/claude/DESIGN-SYSTEM.md
 */

:root {
    /* ---- Colour -------------------------------------------------------- */

    /* Neutrals, measured off the running site. */
    --c-ink:        #131313;  /* footer, deepest surface */
    --c-ink-2:      #232323;  /* body text, price, product names since T-74 */
    --c-ink-3:      #2e2e2e;  /* secondary text on light */

    /* Replaces #999, which measured 2.85:1 on white and 2.26:1 on the page
     * background - both below the 4.5:1 AA needs. This gives 6.9:1 and 5.6:1
     * respectively. Applied in T-74; named here so nothing reintroduces #999. */
    --c-muted:      #5c5c5c;

    --c-line:       #d6d6d6;  /* borders, rules */
    --c-surface-2:  #e5e5e5;  /* page background, as today */
    --c-surface:    #ffffff;  /* cards, header */

    /* The accent is monochrome. Owner's decision, 2026-08-13 (D-13): the site
     * is black, grey and white.
     *
     * So emphasis comes from weight, size and surface rather than hue, and the
     * one dominant action per template is carried by the darkest ink on white.
     * That suits an imagery-led storefront: the graphics on the cars are the
     * only colour on the page, which is what should catch the eye. */
    --c-accent:     #131313;
    --c-accent-ink: #ffffff;

    /* Semantic colours stay coloured even in a monochrome design: an error that
     * is only a shade of grey is an error nobody sees. They are the exception
     * to D-13, they appear only in states, and they are never the sole carrier
     * of meaning - always paired with text and an icon (WCAG 1.4.1). */
    --c-error:      #b3261e;
    --c-success:    #2e6b34;
    --c-warning:    #8a5a00;

    /* Focus: a black ring with a white halo, which beats the red it replaces on
     * every surface the site has. Measured contrast of the ring against the
     * background behind it:
     *
     *                        page #e5e5e5   card #fff   footer #131313
     *   red #ba2020 (old)        5.03          6.33        2.93  <- under 3:1
     *   black + white halo      16.67         21.00       18.58
     *
     * The pair works because one of the two rings always contrasts: on light
     * surfaces you see the black outline, on the near-black footer you see the
     * white halo. The old red ring quietly failed 1.4.11 down there. */
    --c-focus:      #131313;
    --c-focus-halo: #ffffff;

    /* ---- Typography ---------------------------------------------------- */

    /* Only the weights that are actually fetched: Lato-Regular 400 and
     * Lato-Medium 500. Lato-Bold and Josefin Sans are declared in style.css and
     * never loaded, and every h1 currently asks for weight 100, which no loaded
     * face provides. Emphasis comes from 500 and from size, not from weights
     * the browser has to synthesise. */
    --font-sans: 'Lato-Regular', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    --fs-xs:   12px;
    --fs-sm:   14px;
    --fs-base: 16px;
    --fs-md:   18px;
    --fs-lg:   22px;
    --fs-xl:   28px;
    --fs-2xl:  34px;

    /* Multipliers, never px. A px line-height paired with a px font-size is how
     * product names ended up at 0.85 with their lines overlapping (T-74). */
    --lh-xs:   1.4;
    --lh-sm:   1.45;
    --lh-base: 1.55;
    --lh-md:   1.35;
    --lh-lg:   1.25;
    --lh-xl:   1.2;
    --lh-2xl:  1.15;

    --fw-regular: 400;
    --fw-medium:  500;

    --measure: 68ch;  /* reading width for continuous text */

    /* ---- Space --------------------------------------------------------- */

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    /* ---- Shape --------------------------------------------------------- */

    --r-sm:   4px;
    --r-md:   5px;    /* the site's own radius, used 30 times in style.css */
    --r-lg:   12px;
    --r-full: 999px;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .06);
    --sh-2: 0 4px 12px rgba(0, 0, 0, .10);

    /* ---- Layout -------------------------------------------------------- */

    --container-max: 1280px;
    --gutter:        var(--s-4);
    --gutter-lg:     var(--s-5);

    /* Four, replacing 47. New rules use only these; the old breakpoints go out
     * with the components that hold them, slice by slice. */
    --bp-sm:  480px;
    --bp-md:  768px;
    --bp-lg:  1024px;
    --bp-xl:  1440px;

    /* ---- Controls ------------------------------------------------------ */

    --control-h:     44px;  /* primary touch target (WCAG 2.5.8 target size) */
    --control-h-sm:  36px;
    --tap-min:       24px;  /* absolute floor, held since T-55 */

    /* ---- Layers -------------------------------------------------------- */

    --z-base:   0;
    --z-sticky: 100;
    --z-header: 200;
    --z-drawer: 300;
    --z-modal:  400;
    --z-toast:  500;

    /* ---- Motion -------------------------------------------------------- */

    /* Animate opacity and transform only. Anything longer than --dur-base on a
     * storefront reads as lag rather than polish. */
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --ease:     cubic-bezier(.2, 0, .2, 1);
}