/**
 * SPCL TECH — DESIGN TOKENS  ·  v2, the thematic language
 * Edit this file to restyle every page.
 *
 * The formula the whole system is built to:
 *
 *     calm base  +  expressive accent  +  visible material texture
 *
 * Three commitments follow, and they hold on every page:
 *
 *  1. GRAIN. A film-grain layer sits BEHIND the content on every page. It is
 *     the cheapest, loudest signal that a person made this, and the current
 *     counter-movement is explicitly against textureless AI-generic design.
 *     One SVG turbulence filter — no WebGL, no framerate cost.
 *  2. LAYERED COLOUR. No flat fills. Every ground is at least two warm washes
 *     bleeding into each other.
 *  3. TYPE IS THE IMAGE. The display face is the primary visual element, and
 *     it is variable so weight can respond to scroll.
 *
 * Palette keeps SPCL's gold — real equity, and warm metallics are where the
 * category is going — and evolves the old teal into jade rather than chasing
 * a colour we have no claim to.
 *
 * ── MIGRATION ──
 * The v1 token names (--biz, --horizon, --lift-2, --r-card …) are still
 * defined at the bottom of this file, remapped onto v2 values. That keeps
 * css/websites-branding.css and css/system.css working while pages move over
 * one at a time. Delete the compatibility block once nothing references it.
 */

:root {
    /* ══ BASE · warm earth, never cool grey ══ */
    --bone:      #F4EEE4;
    --bone-deep: #E9E0D1;
    --clay:      #DCCDB8;
    --cocoa:     #6A5A49;
    --umber:     #2A231C;
    --pitch:     #16120E;

    /* ══ ACCENT · one colour, used with conviction ══ */
    --gold:      #C89211;
    --gold-lit:  #F2C049;
    --gold-deep: #8A6209;

    /* ══ SUPPORTING ══ */
    --jade:      #12615C;   /* the business pillar */
    --jade-lit:  #2E8F86;
    --moss:      #5B7A43;   /* the life pillar */
    --terra:     #A8543A;   /* warnings, losses */
    --stone:     #8A8578;

    /* ══ ROLES ══ */
    --ink:          var(--umber);
    --ink-soft:     var(--cocoa);
    --ink-mute:     var(--stone);
    --ink-lit:      #FBF6EC;   /* type on dark surfaces */
    --ink-lit-soft: color-mix(in srgb, var(--ink-lit) 78%, transparent);
    --ground:       var(--bone);
    --rule:         rgba(106, 90, 73, 0.22);
    --rule-soft:    rgba(106, 90, 73, 0.12);
    --surface:      #FFFDF9;

    /* ══ SHAPE ══
       10px: warm enough to be inviting, specific enough not to be the pill
       every competitor in this category uses. Distinctiveness is carried by
       grain, palette and type — a button's job is to look pressable. */
    --r:       10px;
    --r-lg:    14px;
    --r-pill:  100px;

    /* ══ TYPE ══
       Bricolage Grotesque: variable width and optical size with deliberately
       odd details — characterful without shouting, and nowhere near the serif
       every AI design reaches for. Archivo underneath, mono for data. */
    --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-body:    'Archivo', system-ui, -apple-system, sans-serif;
    --font-ui:      'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* Sizes travel with their leading and tracking — never re-guessed. */
    --t-hero:    clamp(40px, 6.4vw, 104px);  --lh-hero:  1.0;   --tr-hero:  -0.035em;
    --t-h2:      clamp(32px, 4.4vw, 62px);   --lh-h2:    1.06;  --tr-h2:    -0.032em;
    --t-h3:      clamp(26px, 3.2vw, 44px);   --lh-h3:    1.1;   --tr-h3:    -0.03em;
    --t-card:    26px;                       --lh-card:  1.16;
    --t-stat:    clamp(42px, 6vw, 88px);     --lh-stat:  0.86;
    --t-lead:    clamp(16px, 1.75vw, 20px);  --lh-lead:  1.62;
    --t-body:    16px;                       --lh-body:  1.6;
    --t-label:   12.5px;                     --lh-label: 1.45;
    --t-micro:   10.5px;                     --lh-micro: 1.35;
    --tr-chrome: 0.18em;   /* mono labels */
    --tr-wide:   0.2em;

    /* ══ ELEVATION · warm, never black ══ */
    --lift-1: 0 8px 28px rgba(74, 58, 42, 0.06);
    --lift-2: 0 18px 48px rgba(74, 58, 42, 0.11);
    --lift-3: 0 34px 80px rgba(74, 58, 42, 0.15);

    /* ══ MOTION ══ */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --fast: 0.2s;
    --base: 0.3s;
    --slow: 0.45s;

    /* ══ MEASURE ══ */
    --w-page:    1300px;
    --w-content: 1120px;
    --w-prose:   66ch;
    --w-bullets: 600px;


    /* ═══════════════════════════════════════════════════════════════
       COMPATIBILITY · v1 names, remapped onto v2 values.
       Lets older stylesheets keep rendering while pages migrate.
       ═══════════════════════════════════════════════════════════════ */
    --brand:        var(--gold);
    --brand-hover:  var(--gold-deep);
    --biz:          var(--jade);
    --biz-hover:    #0E4E4A;
    --biz-glow:     18, 97, 92;
    --life:         var(--moss);
    --life-hover:   #47632F;
    --life-glow:    91, 122, 67;
    --horizon:      var(--cocoa);
    --ink-deep:     var(--pitch);

    --surface-strong: rgba(255, 253, 249, 0.72);
    --surface-soft:   rgba(255, 253, 249, 0.46);
    --surface-solid:  var(--surface);
    --hairline:       var(--rule);
    --hairline-soft:  var(--rule-soft);
    --hairline-warm:  #E2DDD6;
    --parchment:      240, 235, 225;
    --blur:           blur(20px);

    --t-stat-sm:  clamp(34px, 4vw, 54px);  --lh-stat-sm: 0.9;
    --tr-display: var(--tr-hero);
    --tr-tight:   -0.02em;

    --r-block: var(--r-lg);
    --r-card:  var(--r-lg);
    --r-box:   var(--r);
    --r-img:   var(--r);

    /* Scroll-journey grounds — journey.js still drives these on pages that
       load it. Retuned so the arrival is bone rather than the old cream. */
    --ground-origin:        233, 224, 209;
    --ground-origin-edge:   224, 213, 196;
    --ground-passage:       241, 233, 220;
    --ground-arrival:       244, 238, 228;
    --ground-arrival-edge:  252, 249, 242;
    --bg-core: var(--ground-arrival);
    --bg-edge: var(--ground-arrival-edge);

    --fjord: #1B4B6B;  --fjord-light: #2E7BA8;  --fjord-pale: #D0E8F5;
    --aurora: #5BA08A; --aurora-bright: #7EC8A8;
    --copper: #B87333; --brass: #C9A96E;
}