/* ========================================================================= DESIGN SYSTEM — tokens only. Two themes, one component set. INK is the default; PAPER is the light reading theme. Nothing outside this file hardcodes a colour. Switch with: or data-theme="ink" ========================================================================= */ :root{ /* ---- INK (default) ---- */ --void:#140F1E; /* page */ --panel:#1E1732; /* cards */ --panel2:#251C3D; /* see-it panels */ --text:#EFE9F7; --strong:#FFFFFF; /* **bold** — brighter than --text, never hardcoded */ --dim:#A395BE; --dim-2:rgba(163,149,190,.85); /* .55 measured 2.87:1 — below AA */ --hot:#FF2E86; /* MEANING: ownership, "you", action */ --hot-fill:#FF2E86; /* same in ink; differs on paper */ --hot-soft:rgba(255,46,134,.42); --ice:#5BE1E6; /* MEANING: the market, lenders */ --good:#6BE5A8; --line:rgba(239,233,247,.14); --stone:rgba(239,233,247,.14); /* surfaces derived from the above */ --bar-bg:rgba(20,15,30,.92); --foot-bg:rgba(30,23,50,.5); --fill-1:rgba(239,233,247,.06); --fill-2:rgba(239,233,247,.10); --fill-3:rgba(239,233,247,.14); --try-bg:rgba(255,46,134,.045); --on-hot:#170710; /* text on a pink fill */ --stage-bg:#171128; --hero-1:#221838; /* hero glow */ --hero-2:#140F1E; /* hero base */ --hero-text:#EFE9F7; --hero-dim:#A395BE; --hero-accent:#FF2E86; --hero-eyebrow:#5BE1E6; --scrim:rgba(20,15,30,.75); --scrim-soft:rgba(20,15,30,.35); --shadow:rgba(0,0,0,.55); /* scrollbar — neutral on purpose. Pink means ownership, never chrome. */ --sb-track:rgba(239,233,247,.04); --sb-thumb:rgba(163,149,190,.30); --sb-thumb-hi:rgba(163,149,190,.55); /* the canvas visuals read these */ --viz-hot:255,46,134; --viz-cool:91,225,230; /* ---- type ---- */ --font-body:"Newsreader",Georgia,serif; --font-ui:"Syne",system-ui,sans-serif; --font-display:"Syne",system-ui,sans-serif; /* paper swaps this to a serif */ --text-body:1.125rem; --leading-body:1.75; /* ---- space ---- */ --space-xs:.4rem; --space-sm:.9rem; --space-md:1.2rem; --space-lg:2.2rem; --space-xl:3.4rem; --gutter:clamp(1.25rem,4vw,3rem); /* ---- layout ---- */ --rail:16rem; --col:34rem; --page:74rem; /* ---- shape + motion ---- */ --radius-sm:3px; --radius-md:4px; --radius-lg:5px; --ease:cubic-bezier(.4,0,.2,1); --dur-fast:.16s; --dur:.25s; --dur-slow:.9s; } /* ========================================================================= PAPER — the light reading theme. Jacket (hero, takeaway, glossary) stays deep teal with gold; pages are warm off-white with charcoal ink. ========================================================================= */ html[data-theme="paper"]{ --void:#FBF7F0; --panel:#F5EFE4; --panel2:#F1EADC; --text:#1A1714; --strong:#0D0B09; /* white here was invisible on cream */ --dim:#6B6257; --dim-2:#6E665B; /* #9A9184 measured 2.91:1 — below AA */ --hot:#C42265; /* rose — clears 4.5:1 on every paper surface */ --hot-fill:#FF2E86; /* full strength, fills only */ --hot-soft:rgba(208,36,107,.4); --ice:#836510; /* gold — 4.63:1 on --foot-bg, the tightest surface */ --good:#1C7A4F; --line:rgba(26,23,20,.16); --stone:#DCD4C6; --bar-bg:rgba(251,247,240,.92); --foot-bg:#F2EBDF; --fill-1:rgba(26,23,20,.05); --fill-2:rgba(26,23,20,.09); --fill-3:#DCD4C6; --try-bg:rgba(208,36,107,.045); --on-hot:#FFFFFF; --stage-bg:#FFFFFF; /* the jacket */ --hero-1:#1B4753; --hero-2:#0C2028; --hero-text:#FBF7EF; --hero-dim:#C9BCA6; --hero-accent:#D8B341; --hero-eyebrow:#D8B341; --scrim:rgba(12,32,40,.72); --scrim-soft:rgba(12,32,40,.35); --shadow:rgba(26,23,20,.16); --sb-track:rgba(26,23,20,.04); --sb-thumb:rgba(26,23,20,.20); --sb-thumb-hi:rgba(26,23,20,.34); --viz-hot:208,36,107; --viz-cool:176,137,22; --font-display:"Cormorant Garamond",Georgia,serif; } /* paper-only typographic switches (serif display, looser tracking) */ html[data-theme="paper"]{ --h1-weight:300; --h1-leading:1.04; --h1-tracking:.005em; --h1-em-style:italic; --display-weight:500; --display-leading:1.16; --display-tracking:0; --statement-size:clamp(1.5rem,4.6vw,2.15rem); --takeaway-bg:#0C2028; --takeaway-fg:#FBF7EF; --pop-bg:#0C2028; --pop-fg:#F4EDE0; }