/**
 * Design tokens.
 *
 * Declares the cascade layer order for the whole theme. Because the order is
 * fixed here, a rule in `woo` always beats one in `components` regardless of
 * specificity or load order. That is what removed the theme's `!important`
 * overrides -- the only two left are the reduced-motion escape hatch in
 * 10-base.css. Keep this file first in the enqueue chain.
 */

@layer tokens, base, layout, components, woo;

@layer tokens {
  :root {
    /* Brand */
    --ink: #0c0d0c;
    --graphite: #30312f;
    --bone: #f1eee7;
    --porcelain: #fbfaf7;
    --paper: #fff;
    --oxblood: #74372f;
    --brass: #a58b62;

    /* Text. Three steps, down from sixteen near-identical greys. */
    --muted: #5a5b55;
    --muted-soft: #74756e;
    --muted-faint: #83847e;
    --on-ink: #fff;

    /* Lines and surfaces */
    --line: rgb(12 13 12 / 16%);
    --line-soft: rgb(12 13 12 / 8%);
    --scrim: rgb(12 13 12 / 56%);

    /* Colourway swatches. Mirrored in inc/product-data.php. */
    --colour-off-white: #ebe6d9;
    --colour-pista: #afc9b3;
    --colour-sienna: #d65d35;
    --colour-navy: #101a28;

    /* Type */
    --sans: "Instrument Sans", "Helvetica Neue", helvetica, arial, sans-serif;

    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-md: 13px;
    --text-base: 15px;
    --text-lg: 16px;
    --text-xl: 17px;

    /* Fluid display sizes, largest to smallest */
    --display-1: clamp(48px, 6.4vw, 104px);
    --display-2: clamp(42px, 5vw, 62px);
    --display-3: clamp(34px, 4vw, 54px);
    --display-4: clamp(26px, 2.5vw, 36px);

    --tracking-tight: -0.02em;
    --tracking-tighter: -0.04em;
    --tracking-display: -0.055em;
    --tracking-wide: 0.1em;
    --tracking-wider: 0.14em;
    --tracking-widest: 0.18em;

    --leading-tight: 0.92;
    --leading-snug: 1.2;
    --leading-normal: 1.45;
    --leading-relaxed: 1.55;

    /* Space */
    --gutter: clamp(20px, 3.4vw, 56px);
    --section: clamp(76px, 10vw, 150px);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 14px;
    --space-4: 18px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Controls. The brand is square -- radius stays 0. */
    --radius: 0;
    --control-height: 48px;
    --field-height: 48px;
    --label-column: 128px;

    --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
    --transition: 0.18s ease;
    --transition-slow: 0.7s var(--ease);

    --z-header: 15;
    --z-announcement: 20;
    --z-overlay: 1000;
  }
}