/* mws-site-kit v0.2.0 | tokens.css
   ==========================================================================
   THE ONLY FILE YOU EDIT PER CLIENT.

   Three layers, and the split is the whole point of this file:

     1. BRAND       - changes every site. Colour ramp, accent, fonts.
     2. SCALE       - changes almost never. Type steps, spacing, easing.
     3. MODE        - a narrow override layer. Touches accent and tints ONLY.

   The guardrail, inherited from the Limitless reference and worth stating
   plainly: a mode override must NEVER move the brand ramp. If switching to
   "winter" can change --brand-600, the site stops looking like the client's
   business and starts looking like a theme. Modes move accent, paper and
   the two lightest brand tints. Nothing else.
   ========================================================================== */

:root{
  /* ---------------------------------------------------------------
     1. BRAND - replace all of this per client.
     Eleven steps, darkest to lightest. Sample 600 from the client's
     real logo mark, then build the ramp around it. 600 is the anchor:
     it is what "the brand colour" means on this site.
     --------------------------------------------------------------- */
  --brand-950:#12130C;
  --brand-900:#222414;
  --brand-800:#32361C;
  --brand-700:#494F26;
  --brand-600:#606830;   /* <- the anchor. Sampled from the real Limitless
                            logo artwork (Austins Brand Mark-17.png),
                            2026-08-24. Not provisional. */
  --brand-500:#727B3D;
  --brand-400:#909A55;
  --brand-300:#ADB489;
  --brand-200:#CBCEBA;
  --brand-100:#E3E4DC;
  --brand-050:#F3F4F1;

  /* Accent. The high-visibility call-to-action colour. Deliberately NOT
     part of the brand ramp: it has to fight the brand colour for attention,
     not harmonise with it. --accent-dk is the shadow/hover partner. */
  --accent:#F2C230;
  --accent-dk:#C99A15;

  /* Neutrals. Warm or cool these slightly toward the brand hue so greys
     do not read as dead next to it, but keep them near-neutral. */
  --ink-950:#101109;
  --ink-900:#1A1C14;
  --ink-700:#3A3D33;
  --ink-500:#6B6E62;
  --ink-300:#A8AB9F;
  --ink-100:#DEDFD7;

  --paper:#F8F8F4;       /* page background */
  --white:#fff;

  /* Fonts. Three slots, and three is enough:
       display - headings. Heavy, opinionated, uppercase.
       body    - paragraphs. Must be readable at 14px on a phone.
       util    - eyebrows, labels, nav. Condensed, letterspaced, uppercase.
     Always keep the system fallbacks. A webfont that fails to load should
     degrade, not collapse the layout. */
  --font-display:'Archivo Black',system-ui,sans-serif;
  --font-body:'Barlow',system-ui,-apple-system,sans-serif;
  --font-util:'Barlow Condensed',system-ui,sans-serif;

  /* The display face's weight, read by base.css for h1-h3. It belongs with
     the face, not with the design: Archivo Black ships at a single heavy
     weight addressed as 400, while Zilla Slab and Inter need 700 or 800 to
     carry a heading at all.

     NAMING A FACE HERE DOES NOT LOAD IT. These three stacks were named from
     the very first version of this kit and nothing ever loaded them, so
     every site shipped rendering in system-ui. Pick a pairing in
     content.js (design.fontPairing) and copy css/fonts/<pairing>.css plus
     its folder into the site; that file overrides all four of these. */
  --font-display-weight:400;

  /* ---------------------------------------------------------------
     2. SCALE - do not edit per client.

     The fluid type scale. Copied verbatim from the Limitless reference
     because it is already correct and re-deriving it per site is exactly
     the waste this kit exists to remove.

     Every step is clamp(min, preferred, max): the text grows with the
     viewport and then stops. No breakpoint jumps, no 40px headings on a
     360px phone. Use the steps. Do not write raw font-size values.
     --------------------------------------------------------------- */
  --step--1:clamp(.82rem,.79rem + .16vw,.92rem);   /* fine print, labels  */
  --step-0:clamp(1rem,.96rem + .22vw,1.11rem);     /* body                */
  --step-1:clamp(1.18rem,1.10rem + .40vw,1.44rem); /* lede, h3            */
  --step-2:clamp(1.45rem,1.30rem + .78vw,2rem);    /* sub-headings        */
  --step-3:clamp(1.85rem,1.55rem + 1.5vw,2.9rem);  /* h2                  */
  --step-4:clamp(2.4rem,1.85rem + 2.9vw,4.6rem);   /* h1 / hero           */

  /* Spacing. Deliberately sparse - five values, not a 12-step system.
     A short scale forces consistent rhythm; a long one just relocates
     the guesswork. */
  --sp-2:1rem;
  --sp-3:1.5rem;
  --sp-4:2.5rem;
  --sp-5:4rem;
  --sp-6:6rem;

  /* Structure */
  --tear-h:clamp(34px,5vw,84px);   /* torn-edge band height */
  --wrap:1240px;                    /* max content width     */

  /* Easing. One curve, used everywhere. A site with four different easing
     curves reads as four different sites. */
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   3. MODE OVERLAY

   Set data-mode on <html> to shift the site's seasonal or campaign feel:

       <html data-mode="winter">

   Or from the console / a one-line script:

       document.documentElement.dataset.mode = 'storm';

   THE RULE: a mode block may only override --accent, --accent-dk, --paper,
   and the two lightest brand tints (--brand-050, --brand-100). If you find
   yourself wanting to override --brand-600 here, you do not want a mode.
   You want a different client's tokens.

   These four are presets, not a fixed list. Add campaign modes the same way
   ("promo", "storm-response") using the same four-property budget.

   NOTE: this is set in the HTML source by MWS and deployed. There is no
   editing UI and there is not meant to be one. See README "What this kit
   deliberately does not do".
   ========================================================================== */

html[data-mode="winter"]{
  --accent:#8FC1E3; --accent-dk:#5B93BC;
  --paper:#F1F6FA;  --brand-050:#F3F4F1; --brand-100:#E3E4DC;
}
html[data-mode="spring"]{
  --accent:#A8C93C; --accent-dk:#7E9A22;
  --paper:#F5F9EE;  --brand-050:#F3F4F1; --brand-100:#E3E4DC;
}
html[data-mode="storm"]{
  --accent:#E8842A; --accent-dk:#B7621A;
  --paper:#F7F4F1;  --brand-050:#F3F4F1; --brand-100:#E3E4DC;
}
html[data-mode="summer"]{
  --accent:#F2C230; --accent-dk:#C99A15;
  --paper:#FAF8F1;  --brand-050:#F3F4F1; --brand-100:#E3E4DC;
}

/* Cross-fade when the mode changes, so a switch reads as a shift in light
   rather than a flash. Only colour properties transition - never layout. */
body,
.band,
.card,
.btn--go,
.hero__tag{
  transition:background-color .6s var(--ease-out),
             color .6s var(--ease-out),
             border-color .6s var(--ease-out);
}
@media(prefers-reduced-motion:reduce){
  body,.band,.card,.btn--go,.hero__tag{transition:none}
}