/* ══════════════════════════════════════════════════════════════ PI2AI shared design tokens One source of truth for colors, shadows and the type scale. Every page links this file and sets data-theme="pi" or data-theme="ai" on to pick its brand variant — instead of each page carrying its own copy of these values, which is how the --navy/--amber drift happened in the first place. ══════════════════════════════════════════════════════════════ */ :root { /* ── Backgrounds */ --bg: #ffffff; --bg2: #faf9f7; --bg3: #f5f2ee; /* ── Text */ --text: #1c1917; --text2: #292524; --text3: #6b7280; --muted: #1a1a1a; --muted2: #6b7280; /* ── Borders & shadows */ --border: rgba(28, 25, 23, 0.07); --border2: rgba(28, 25, 23, 0.13); --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04); --shadow-md: 0 4px 16px rgba(28, 25, 23, 0.08), 0 2px 6px rgba(28, 25, 23, 0.05); --shadow-lg: 0 12px 40px rgba(28, 25, 23, 0.11), 0 4px 12px rgba(28, 25, 23, 0.07); /* ── Type scale — use these for any new/edited font-size instead of picking a new number. */ --fs-2xs: 10px; /* micro badge / eyebrow */ --fs-xs: 11px; /* pill / tag label */ --fs-sm2: 12px; /* meta text, small caption */ --fs-sm: 14px; /* secondary body copy, buttons, card description */ --fs-base: 16px; /* primary body copy, section subtitle */ --fs-md: 18px; /* lead text, compact card title */ --fs-lg: 20px; /* medium emphasis heading */ --fs-xl: 22px; /* standard card title */ --fs-2xl: 26px; /* flagship card title */ --fs-3xl: 30px; /* brand logo mark */ --fs-hero: 50px; /* hero h1 (desktop) */ --max: 1280px; --r: 14px; --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif; } /* ── PI theme (Process Intelligence: teal) ── */ :root, html[data-theme="pi"] { --navy: #0d9488; --navy-mid: #0f766e; --navy-light: #14b8a6; --navy-dim: rgba(13, 148, 136, 0.08); --navy-mid2: rgba(13, 148, 136, 0.15); --navy-glow: rgba(13, 148, 136, 0.28); --amber: #9368b7; --amber-mid: #a97bc5; --amber-light: #c4a0d9; --amber-dim: rgba(147, 104, 183, 0.08); --amber-mid2: rgba(147, 104, 183, 0.15); --amber-glow: rgba(147, 104, 183, 0.28); --amber-text: #7d5a9c; /* AA-compliant (~5.6:1 on white) variant of --amber for small text/labels */ } /* ── AI theme (Artificial Intelligence: indigo) ── */ html[data-theme="ai"] { --navy: #3d3fbf; --navy-mid: #2c319e; --navy-light: #7c8af5; --navy-dim: rgba(61, 63, 191, 0.08); --navy-mid2: rgba(61, 63, 191, 0.15); --navy-glow: rgba(61, 63, 191, 0.28); --amber: #3d3fbf; --amber-mid: #2c319e; --amber-light: #7c8af5; --amber-dim: rgba(61, 63, 191, 0.08); --amber-mid2: rgba(61, 63, 191, 0.15); --amber-glow: rgba(61, 63, 191, 0.28); --amber-text: #2c319e; /* indigo is already AA-compliant as text, no separate tint needed */ }