/* 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));
    /* Reserves the footer's box before the stylesheets land, and feeds --main-content-min-height below so
       header + main + footer come to exactly 100vh on a short page. It must therefore MATCH the brand's
       real footer height: set too high it pads the footer with dead space, and because the sample bar sits
       directly under the footer, that dead space is the visible gap between the ABN and the bar.
       SCC's footer measures ~395px, so 25rem is right. SM's is ~363px — tokens-sm.css overrides this. */
    --footer-min-height:      25rem;     /* 400px — SCC; SM overrides to 23rem */
    --content-max-width:      118.75rem; /* 1900px */
    --main-content-min-height: calc(100vh - var(--footer-min-height) - var(--header-total-height));
}