/* ============================================================= Master Tokens — typography, spacing, radii, motion, layout. Depends on colors.css being loaded first. ============================================================= */ :root { /* ============================================================= TYPOGRAPHY · Inter for everything ============================================================= */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; /* Type scale */ --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-15: 0.9375rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-36: 2.25rem; --fs-48: 3rem; --fs-60: 3.75rem; --fs-72: 4.5rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.45; --lh-relaxed: 1.6; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* Semantic typography shorthand */ --type-display: var(--fw-bold) var(--fs-72)/var(--lh-tight) var(--font-sans); --type-h1: var(--fw-bold) var(--fs-48)/var(--lh-tight) var(--font-sans); --type-h2: var(--fw-bold) var(--fs-36)/var(--lh-snug) var(--font-sans); --type-h3: var(--fw-semibold) var(--fs-30)/var(--lh-snug) var(--font-sans); --type-h4: var(--fw-semibold) var(--fs-24)/var(--lh-snug) var(--font-sans); --type-h5: var(--fw-semibold) var(--fs-20)/var(--lh-snug) var(--font-sans); --type-lead: var(--fw-regular) var(--fs-18)/var(--lh-relaxed) var(--font-sans); --type-body: var(--fw-regular) var(--fs-16)/var(--lh-normal) var(--font-sans); --type-body-sm: var(--fw-regular) var(--fs-14)/var(--lh-normal) var(--font-sans); --type-label: var(--fw-medium) var(--fs-13)/var(--lh-snug) var(--font-sans); --type-eyebrow: var(--fw-semibold) var(--fs-12)/var(--lh-snug) var(--font-sans); --type-mono: var(--fw-regular) var(--fs-13)/var(--lh-normal) var(--font-mono); /* ============================================================= SPACING · 4-pt grid ============================================================= */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ============================================================= RADII ============================================================= */ --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 0.875rem; --radius-xl: 1.25rem; --radius-2xl: 1.75rem; --radius-pill: 999px; --radius-card: var(--radius-lg); /* ============================================================= MOTION ============================================================= */ --ease-standard: cubic-bezier(.2, .7, .2, 1); --ease-emphasized:cubic-bezier(.2, .9, .1, 1.1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 520ms; /* ============================================================= LAYOUT ============================================================= */ --container-sm: 40rem; --container-md: 48rem; --container-lg: 64rem; --container-xl: 80rem; --container-2xl:90rem; --z-base: 1; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 1500; } /* ============================================================= BASE STYLES — activated by class="ccrm" on ============================================================= */ .ccrm, body.ccrm { font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--text-primary); background: var(--bg-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ccrm h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); margin: 0; } .ccrm h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); margin: 0; } .ccrm h3 { font: var(--type-h3); letter-spacing: var(--tracking-snug); margin: 0; } .ccrm h4 { font: var(--type-h4); letter-spacing: var(--tracking-snug); margin: 0; } .ccrm h5 { font: var(--type-h5); margin: 0; } .ccrm p { font: var(--type-body); margin: 0 0 var(--space-4); color: var(--text-secondary); } .ccrm small, .ccrm .text-sm { font: var(--type-body-sm); } .ccrm .eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--secondary-500); } .ccrm .label { font: var(--type-label); color: var(--text-secondary); } .ccrm code, .ccrm .mono { font: var(--type-mono); } .ccrm a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); } .ccrm a:hover { color: var(--text-link-hover); } ::selection { background: var(--secondary-200); color: var(--primary-900); }