/* GI Pulse design tokens + shared components (step 4).
   ONE file for colour (light/dark), type scale, containers, spacing, radii, the card, the button + chip sets and the 3 hero templates.
   Loaded on every page except dashboard.html (which keeps its own terminal theme). Per-page CSS should reference these tokens, not literals. */

/* ---- colour: light ---- */
:root,[data-theme="light"]{color-scheme:light;--bg:#FBF7F0;--bg2:#F4EEE3;--s1:#FFFDF9;--s2:#FFFFFF;--s3:#F6F0E6;--line:#E6DFD3;--line2:#D3C8B5;--rule:#14213D;--text:#14213D;--t2:#454D5C;--t3:#6B6F78;--accent:#1F3F8F;--accent2:#1F4FBF;--acdim:rgba(31,63,143,.07);--gold:#86631E;--golddim:rgba(156,116,36,.12);--pos:#1E7A50;--neg:#B3261E;--clockbg:#14213D;--clocktx:#FBF7F0;--imgf:none;--shadow:0 1px 2px rgba(20,33,61,.05),0 10px 28px -18px rgba(20,33,61,.22);--glow:none;--serif:"Source Serif 4",Georgia,"Times New Roman",serif}
/* ---- colour: dark ---- */
[data-theme="dark"]{color-scheme:dark;--bg:#0E1420;--bg2:#121A28;--s1:#151D2C;--s2:#182131;--s3:#1C2638;--line:rgba(237,230,216,.12);--line2:rgba(237,230,216,.24);--rule:#D9B26A;--text:#EDE6D8;--t2:#BDB6A8;--t3:#948E82;--accent:#9DB7F2;--accent2:#A9C1F7;--acdim:rgba(157,183,242,.10);--gold:#D9B26A;--golddim:rgba(217,178,106,.14);--pos:#5CC896;--neg:#F08070;--clockbg:#1C2638;--clocktx:#F1E3C4;--imgf:brightness(.82) saturate(.9);--shadow:0 1px 0 rgba(255,255,255,.03) inset,0 18px 40px -22px rgba(0,0,0,.7);--glow:none}
/* light-only pale tints + muted topic kickers (all kicker colours >= 5.3:1 on every tint) */
:root,[data-theme="light"]{--tint-blue:#EEF3FA;--tint-sage:#EEF4EE;--tint-sand:#FAF1E6;--tint-lav:#F1EEF8;--tint-rose:#FBEEEC;--tint-head:#E6EEF8;
 --k-motor:#2F5D8A;--k-health:#2E6B4F;--k-reg:#7A2E26;--k-markets:#80530F;--k-claims:#9C3A28;--k-dist:#5B4791;--k-cyber:#1F6670;--k-ins:#4A5568;--k-gen:#5A5F6B;--link:#326891}
/* on-dark surfaces (the feature hero): fixed, theme independent */
:root{--on-dark:#fff;--on-dark-gold:#E7C873;--on-dark-ink:#141A26}

/* ---- type scale (ONE scale: h1 / h2 / h3 / body / small, plus lede, caption, label) ---- */
:root{
 --fs-h1:clamp(32px,4.6vw,48px);--fs-h2:clamp(22px,2.6vw,28px);--fs-h3:18px;
 --fs-body:16px;--fs-lede:clamp(16.5px,1.6vw,18.5px);--fs-small:14px;--fs-xs:12px;
 --lh-h1:1.1;--lh-h2:1.2;--lh-h3:1.3;--lh-body:1.65;
 --font-sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
 /* containers: reading column + wide page */
 --w-read:820px;--w-wide:1240px;--gutter:20px;
 /* spacing scale */
 --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;
 /* radii: ONE card, ONE button/input, pills for chips, small tags */
 --r-card:12px;--r-btn:8px;--r-chip:999px;--r-tag:4px;
 --tap:44px;
}
@media(min-width:641px){:root{--gutter:28px}}

/* ---- base type ---- */
body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body)}
h1,h2,h3{font-family:var(--serif);color:var(--text);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700;letter-spacing:-.02em;margin:var(--sp-3) 0 var(--sp-4)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;letter-spacing:-.01em;margin:var(--sp-7) 0 var(--sp-3)}
h3{font-family:var(--font-sans);font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:650;letter-spacing:-.005em;margin:0 0 var(--sp-2)}
.gi-lede,.lede,.lead{font-size:var(--fs-lede);line-height:1.6;color:var(--t2);max-width:62ch}
.gi-small,.small{font-size:var(--fs-small)}.gi-xs,.xs{font-size:var(--fs-xs)}
/* kicker / section label: the one small-caps style */
.gi-kicker,.kick,.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font:700 var(--fs-xs)/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* ---- containers ---- */
.gi-wrap,.wrap,.hw,.gd,.paper .wrap{width:100%;max-width:var(--w-wide);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.gi-read,.narrow,.flow,.wt,.ask-wrap{max-width:var(--w-read);margin-left:auto;margin-right:auto}
.topnav .in{max-width:var(--w-wide)}
.gs-host{max-width:var(--w-wide);padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---- the card ---- */
.gi-card,.card,.dash,.vc,.wt-g>div,.band>div,.stepcard{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.gi-card,.card{padding:var(--sp-5)}
.dash,.wt-g>div,.band>div,.vc{padding:var(--sp-5)}
.feat,.empty{border-radius:var(--r-card)}

/* ---- buttons: ONE primary + ONE secondary (+ size) ---- */
.gi-btn,.btn:not(.navcta),.pbtn,.go,.wt-cta,.gs-btn,.mbtn,.b1,.b2{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--tap);padding:10px 20px;border-radius:var(--r-btn);font:600 15px/1.2 var(--font-sans);text-decoration:none!important;cursor:pointer;transition:filter .15s,transform .15s,border-color .15s;box-shadow:none;width:auto}
.gi-btn:hover,.btn:not(.navcta):hover,.pbtn:hover,.go:hover,.wt-cta:hover,.gs-btn:hover,.mbtn:hover,.b1:hover,.b2:hover{filter:brightness(1.08);transform:translateY(-1px)}
.gi-btn:focus-visible,.btn:not(.navcta):focus-visible,.pbtn:focus-visible,.b1:focus-visible,.b2:focus-visible,.wt-cta:focus-visible,.go:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.gi-btn--lg,.btn:not(.navcta).lg{padding:14px 26px;font-size:16px}
/* primary: navy fill, cream text, gold hairline */
.gi-btn--primary,.btn:not(.navcta),.btn:not(.navcta).gold,.pbtn,.pbtn.g,.go,.wt-cta,.gs-btn{background:var(--clockbg);color:var(--clocktx)!important;border:1px solid var(--gold)}
[data-theme="dark"] .gi-btn--primary,[data-theme="dark"] .btn:not(.navcta):not(.ghost),[data-theme="dark"] .pbtn:not(.o),[data-theme="dark"] .go,[data-theme="dark"] .wt-cta,[data-theme="dark"] .gs-btn{background:var(--gold);color:var(--on-dark-ink)!important;border-color:var(--gold)}
/* secondary: outline */
.gi-btn--secondary,.btn:not(.navcta).ghost,.pbtn.o,.mbtn{background:transparent;color:var(--text)!important;border:1px solid var(--line2)}
.gi-btn--secondary:hover,.btn:not(.navcta).ghost:hover,.pbtn.o:hover,.mbtn:hover{border-color:var(--text)}
.gi-btn svg,.btn:not(.navcta) svg{width:18px;height:18px}
/* ---- chips: ONE pill, ONE small tag ---- */
.gi-chip,.chip,.fchip,.toc a,.pill,.who span{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-chip);border:1px solid var(--line2);background:var(--s1);color:var(--t2);font:600 13px/1.2 var(--font-sans);cursor:pointer;white-space:nowrap}
.gi-chip.on,.chip.on,.fchip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.pill,.who span{cursor:default;padding:4px 10px;font-size:var(--fs-xs)}
.pill.gold{background:var(--golddim);color:var(--gold);border-color:transparent}
.gi-tag,.chip2,.reported,.stance,.lb span,.tag{border-radius:var(--r-tag)}
input,select,textarea{border-radius:var(--r-btn)}

/* ---- hero templates ---- */
.gi-hero{padding:var(--sp-7) 0 var(--sp-5)}
.gi-hero h1{margin:var(--sp-3) 0 var(--sp-3)}
.gi-hero .lede,.gi-hero .lead{font-size:var(--fs-lede);line-height:1.6;color:var(--t2);margin:0;max-width:62ch}
.gi-hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
/* 1. feature: dark image banner (home) */
.gi-hero--feature{padding:0;color:var(--on-dark)}
.gi-hero--feature h1{color:var(--on-dark)}
.gi-hero--feature .b1{background:var(--on-dark-gold);color:var(--on-dark-ink)!important;border:1px solid var(--on-dark-gold)}
.gi-hero--feature .b2{background:transparent;color:var(--on-dark)!important;border:1px solid rgba(255,255,255,.6)}
/* 2. page: kicker + h1 + lede, left aligned on the page, double rule underneath */
.gi-hero--page{padding:var(--sp-6) 0 var(--sp-4);border-bottom:3px double var(--rule);text-align:left}
.gi-hero--page h1{margin-top:var(--sp-2)}
.gi-hero--page.wrap{border-bottom:0;position:relative}.gi-hero--page.wrap::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;border-bottom:3px double var(--rule)}
.gi-hero--page.wrap:has(>.gi-read)::after,.gi-hero--page.wrap:has(>.flow)::after{left:max(var(--gutter),calc(50% - var(--w-read)/2));right:max(var(--gutter),calc(50% - var(--w-read)/2))}
/* 3. split: copy left, figure right (guides, glossary, have your say) */
.gi-hero--split{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--sp-6);align-items:center;padding:var(--sp-7) 0 var(--sp-2);border-bottom:1px solid var(--line)}
.gi-hero--split figure{margin:0}.gi-hero--split figcaption{font-size:var(--fs-xs);color:var(--t3);margin-top:6px}
.gi-hero--split img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-card);filter:var(--imgf)}
@media(max-width:860px){.gi-hero--split{grid-template-columns:1fr;gap:var(--sp-4);padding-top:var(--sp-5)}.gi-hero--split figure{order:-1}}
@media(max-width:640px){.gi-hero{padding-top:var(--sp-5)}}

/* nav CTA is chrome, not a content button: keep its compact metrics */
.topnav .navcta,.topnav .navcta span{line-height:normal}