/* ============================================================ Payd — Design Tokens Drop this into any HTML via: ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap'); :root { /* ---------- Color: surfaces (cool whites) ---------- */ --paper: oklch(0.972 0.006 250); /* dominant canvas — cool off-white */ --paper-2: oklch(0.955 0.008 250); /* recessed wells, table headers */ --white: oklch(0.995 0.003 250); /* cards floating on paper */ --ink: oklch(0.20 0.020 250); /* primary text */ /* ---------- Color: foreground scale ---------- */ --fg-1: oklch(0.20 0.020 250); --fg-2: oklch(0.38 0.015 250); /* body — passes AA on paper */ --fg-3: oklch(0.50 0.010 250); /* secondary — passes AA on paper */ --fg-4: oklch(0.62 0.010 250); /* hint — large/decorative only */ /* ---------- Color: lines ---------- */ --line-1: oklch(0.91 0.010 250); /* on paper */ --line-2: oklch(0.88 0.010 250); /* on white cards */ --line-strong: oklch(0.78 0.010 250); /* dividers needing weight */ /* ---------- Accent: Indigo (primary) ---------- */ --indigo: oklch(0.34 0.10 250); --indigo-hover: oklch(0.30 0.10 250); --indigo-soft: oklch(0.93 0.030 250); --indigo-ink: oklch(0.28 0.095 250); /* AA on white & on indigo-soft */ /* ---------- Accent: Jade (positive — money in) ---------- */ --jade: oklch(0.50 0.13 145); --jade-soft: oklch(0.96 0.030 145); --jade-ink: oklch(0.36 0.11 145); /* AA on white & on jade-soft */ /* ---------- Accent: Vermilion (attention — money out, declines) ---------- */ --vermilion: oklch(0.50 0.15 25); --vermilion-soft: oklch(0.96 0.025 25); --vermilion-ink: oklch(0.40 0.13 25); /* AA on white & on vermilion-soft */ /* ---------- Type families ---------- */ --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif; --font-sans: 'Geist', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ---------- Type sizes ---------- */ --t-display-xl: 96px; --t-display-l: 72px; --t-display-m: 56px; --t-display-s: 40px; --t-h1: 32px; --t-h2: 24px; --t-h3: 18px; --t-h4: 15px; --t-body: 15px; --t-body-sm: 13px; --t-label: 12px; --t-mono: 13px; --lh-display: 1.05; --lh-tight: 1.18; --lh-body: 1.5; --lh-mono: 1.4; --ls-display: -0.02em; --ls-tight: -0.01em; --ls-label: 0.06em; /* ---------- Spacing scale (4px base) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px; --s-18: 72px; --s-24: 96px; /* ---------- Radii ---------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; /* ---------- Shadows (cool-tinted) ---------- */ --shadow-sm: 0 1px 0 0 rgba(20,28,48,0.04), 0 1px 2px 0 rgba(20,28,48,0.04); --shadow-md: 0 4px 12px -2px rgba(20,28,48,0.07), 0 2px 4px -1px rgba(20,28,48,0.04); --shadow-lg: 0 12px 32px -6px rgba(20,28,48,0.12), 0 4px 8px -2px rgba(20,28,48,0.06); /* ---------- Motion ---------- */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; } /* ============================================================ Semantic helpers — apply directly to elements ============================================================ */ .font-display { font-family: var(--font-display); letter-spacing: var(--ls-display); } .font-sans { font-family: var(--font-sans); } .font-mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1, 'cv11' 1; } .tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .h-display-xl { font-family: var(--font-display); font-size: var(--t-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400; } .h-display-l { font-family: var(--font-display); font-size: var(--t-display-l); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400; } .h-display-m { font-family: var(--font-display); font-size: var(--t-display-m); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400; } .h-display-s { font-family: var(--font-display); font-size: var(--t-display-s); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: 400; } .h1 { font-family: var(--font-sans); font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 600; color: var(--fg-1); } .h2 { font-family: var(--font-sans); font-size: var(--t-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 600; color: var(--fg-1); } .h3 { font-family: var(--font-sans); font-size: var(--t-h3); line-height: var(--lh-tight); font-weight: 600; color: var(--fg-1); } .h4 { font-family: var(--font-sans); font-size: var(--t-h4); line-height: var(--lh-tight); font-weight: 600; color: var(--fg-1); } .body { font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); } .body-sm { font-family: var(--font-sans); font-size: var(--t-body-sm); line-height: var(--lh-body); color: var(--fg-2); } .label { font-family: var(--font-sans); font-size: var(--t-label); line-height: 1; text-transform: uppercase; letter-spacing: var(--ls-label); font-weight: 500; color: var(--fg-3); } .mono { font-family: var(--font-mono); font-size: var(--t-mono); line-height: var(--lh-mono); font-feature-settings: 'tnum' 1; } .payd-reset, .payd-reset * { box-sizing: border-box; } .payd-reset { background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }