/* tokens.css — shared design tokens (Visual-Reference §11). Ported from the live
   variable_sm.css / variable_scc.css. Neutral scale, type scale, spacing, dimensions
   are identical across both brands; only colour/font/button tokens differ (tokens-{brand}.css).
   Components reference these variables only — never literal colours or sizes. */
:root {
    /* --- Neutral scale (do not reference the raw scale from components; prefer the semantic aliases below) --- */
    --color-neutral-100: #1D252D;
    --color-neutral-95:  #283038;
    --color-neutral-90:  #343B42;
    --color-neutral-80:  #4A5157;
    --color-neutral-60:  #777C81;
    --color-neutral-50:  #8E9296;
    --color-neutral-40:  #A5A8AB;
    --color-neutral-20:  #D2D3D5;
    --color-neutral-10:  #E8E9EA;
    --color-neutral-5:   #F4F4F5;
    --color-neutral-2:   #FAFBFB;
    --color-white:       #FFFFFF;
    --color-error:       #dc3545;
    --color-success:     #63819e; /* success messaging ONLY — never links/UI/body (owner: off-palette as a link colour) */

    /* --- Text colours (the sanctioned set for `color:` — keep it to these) ---
       Body/headings = --color-text; all secondary text = --color-muted (one muted only, no second grey);
       headings may use --color-title (brand-swappable); errors = --color-error. On dark backgrounds use
       --color-white (solid) or --color-on-dark-muted (secondary). Links use --color-text (+ underline).
       Don't reach into the neutral ramp directly for text, and don't add new tints. */
    --color-on-dark-muted: rgba(255, 255, 255, 0.85); /* secondary text over dark images/footers */

    /* --- Semantic neutral aliases --- */
    --color-text:          var(--color-neutral-100);
    --color-muted:         var(--color-neutral-60);
    --color-page-bg:       var(--color-neutral-2);
    --color-header-bg:     var(--color-neutral-5);
    --color-footer-bg:     var(--color-neutral-90);
    --color-underline:     var(--color-neutral-10);
    --color-border-input:  var(--color-neutral-40);
    --color-border-button: var(--color-neutral-40);
    --color-disabled-bg:   var(--color-neutral-10);
    --color-disabled-text: var(--color-neutral-20);
    --color-fav:           #8DC63F; /* favourited heart (lime green) */

    /* --- Type scale (standardised 2026-06-25; proportional-shrink model) ---
       ONE global factor (--type-scale) ramps every size from 100% on desktop down to --type-min-scale on
       narrow screens, so the whole scale shrinks PROPORTIONALLY and keeps its balance. --type-floor is the
       absolute minimum — no size drops below it: each token = max(floor, desktop × scale). The 2xs micro
       tier is fixed at the floor (decorative: unit suffixes, count badges) and never scales. Two knobs:
       change --type-min-scale (how small at the narrow end) or --type-floor (the bare minimum). The desktop
       (100%) sizes are the rem values below. Exceptions kept off this scale: the nav-link clamp + the CMS
       ComponentZone cqi fluid type. */
    --type-min-scale: 0.85;    /* fluid text is this fraction of its desktop size at the narrow end */
    --type-floor:     0.72rem; /* bare minimum — nothing shrinks below this */
    /* Unitless 0.85→1 ramp across the 22.5rem (360px) … 75rem (1200px) viewport range. */
    --type-scale: clamp(var(--type-min-scale),
                        calc(var(--type-min-scale) + (1 - var(--type-min-scale)) * (100vw - 22.5rem) / (75rem - 22.5rem)),
                        1);

    --text-2xs:  var(--type-floor);                                    /* micro (fixed): units, badges */
    --text-xs:   max(var(--type-floor), calc(0.82rem * var(--type-scale))); /* fine print */
    --text-sm:   max(var(--type-floor), calc(0.9rem  * var(--type-scale))); /* labels, meta, secondary */
    --text-base: max(var(--type-floor), calc(1rem    * var(--type-scale))); /* body */
    --text-md:   max(var(--type-floor), calc(1.15rem * var(--type-scale))); /* lead/intro, totals */
    --text-lg:   max(var(--type-floor), calc(1.3rem  * var(--type-scale))); /* large UI / sub-headings */
    --title-sm:  max(var(--type-floor), calc(1.7rem  * var(--type-scale))); /* card/section sub-headings */
    --title-md:  max(var(--type-floor), calc(2.2rem  * var(--type-scale))); /* section headings, zone headers */
    --title-lg:  max(var(--type-floor), calc(2.25rem * var(--type-scale))); /* page title / H1 (~80% of the prior 2.8rem, owner 2026-06-25) */
    --line-height-base:    1.5;
    --line-height-heading: 1.15;
    --menulink-font-size:  16px;

    /* --- Spacing scale (Design-Direction §7) --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;

    /* --- Radius --- */
    --radius-sm:     3px;
    --radius-md:     6px;
    --radius-lg:     12px;
    --radius-button: var(--radius-md);
    --radius-image:  var(--radius-md);

    /* --- Shadows --- */
    --shadow-sm: 0 1px 2px rgba(29, 37, 45, 0.08);
    --shadow-md: 0 4px 12px rgba(29, 37, 45, 0.12);

    /* --- Dimensions (rem values match the live variable_*.css) --- */
    --header-height:          6.25rem;   /* 100px */
    --header-gap-bar-height:  0.25rem;   /* 4px */
    --header-total-height:    calc(var(--header-height) + var(--header-gap-bar-height));
    --footer-min-height:      25rem;     /* 400px */
    --content-max-width:      118.75rem; /* 1900px */
    --main-content-min-height: calc(100vh - var(--footer-min-height) - var(--header-total-height));
}