/* ============================================================
Prism Design System — Colors + Type
------------------------------------------------------------
Dark mode default. Light mode = .light on :root or .
Tokens map 1:1 to the entries in tokens.json so a single
source of truth feeds Tailwind config.
============================================================ */
/* Fonts loaded via + in index.html
for faster LCP. Do not @import here — that blocks render twice. */
:root,
:root.dark {
/* ---------- Brand ---------- */
--prism-amber: #e4a853; /* signature */
--prism-amber-soft: #f2c685;
--prism-amber-deep: #b97f2f;
--prism-iris: #7c8cf8; /* accent / focus / informational */
--prism-iris-soft: #a6b1fb;
--prism-iris-deep: #4f60d6;
/* ---------- Neutrals — DARK ---------- */
--bg-canvas: #0b0b0e; /* page background */
--bg-surface: #111114; /* cards, panels */
--bg-elevated: #16161b; /* elevated cards, inputs */
--bg-overlay: #1c1c22; /* dropdowns, command palette */
--bg-hover: #1f1f26;
--bg-pressed: #25252d;
--fg-1: #f2f2f4; /* primary text */
--fg-2: #b7b7be; /* secondary text */
--fg-3: #7a7a85; /* tertiary, captions */
--fg-4: #4d4d55; /* disabled, faint */
--fg-on-amber: #1a1308; /* text on amber surfaces */
--fg-on-iris: #0b0b14;
--border-subtle: #1f1f25;
--border-default: #2a2a33;
--border-strong: #3a3a45;
/* ---------- Semantic — Severity (disciplined) ---------- */
--sev-low-fg: #6fb4a8; /* slate-teal */
--sev-low-bg: #143431;
--sev-low-border: #1f4f49;
--sev-med-fg: #d4a14a; /* warm ochre */
--sev-med-bg: #3a2e14;
--sev-med-border: #5c481f;
--sev-high-fg: #d97757; /* muted coral, NEVER neon red */
--sev-high-bg: #3a1f17;
--sev-high-border: #5c3024;
/* ---------- Semantic — System ---------- */
--success-fg: #6fb4a8;
--success-bg: #143431;
--warning-fg: #d4a14a;
--warning-bg: #3a2e14;
--danger-fg: #d97757;
--danger-bg: #3a1f17;
--info-fg: var(--prism-iris-soft);
--info-bg: #1a1d3a;
/* ---------- Focus ---------- */
--focus-ring: var(--prism-iris);
/* ---------- Shadows ---------- */
--shadow-1:
0 4px 14px -4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
--shadow-2:
0 24px 56px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
--shadow-inset-active: inset 0 1px 2px rgba(0, 0, 0, 0.4);
/* ---------- Radii ---------- */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-pill: 999px;
/* ---------- Spacing (4px base) ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-14: 56px;
--space-20: 80px;
--space-30: 120px;
/* ---------- Motion ---------- */
--ease-out: cubic-bezier(0.32, 0.72, 0, 1);
--ease-in: cubic-bezier(0.6, 0, 0.7, 0.3);
--dur-fast: 160ms;
--dur-base: 280ms;
--dur-slow: 360ms;
/* ---------- Type — families ---------- */
--font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-serif: 'Instrument Serif', ui-serif, Georgia, serif;
--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* ---------- Type — scale (in px so it's obvious) ---------- */
--text-xs: 12px;
--text-sm: 13px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 17px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 32px;
--text-4xl: 44px;
--text-5xl: 60px;
--text-6xl: 84px;
/* ---------- Type — weights ---------- */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* ---------- Type — leading / tracking ---------- */
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-base: 1.5;
--leading-loose: 1.7;
--tracking-tight: -0.02em;
--tracking-snug: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-eyebrow: 0.12em;
}
/* ---------- LIGHT MODE ---------- */
:root.light {
--bg-canvas: #fafaf7;
--bg-surface: #ffffff;
--bg-elevated: #ffffff;
--bg-overlay: #ffffff;
--bg-hover: #f2f2ee;
--bg-pressed: #e8e8e2;
--fg-1: #131316;
--fg-2: #54545c;
--fg-3: #828289;
--fg-4: #b5b5ba;
--border-subtle: #ecece7;
--border-default: #dcdcd5;
--border-strong: #c2c2ba;
--sev-low-fg: #2e7e72;
--sev-low-bg: #e5f2ef;
--sev-low-border: #c0dfd8;
--sev-med-fg: #8a6516;
--sev-med-bg: #fbf1db;
--sev-med-border: #e5cc8a;
--sev-high-fg: #b0492a;
--sev-high-bg: #fbe7de;
--sev-high-border: #e8b7a1;
--success-fg: #2e7e72;
--success-bg: #e5f2ef;
--warning-fg: #8a6516;
--warning-bg: #fbf1db;
--danger-fg: #b0492a;
--danger-bg: #fbe7de;
--info-fg: var(--prism-iris-deep);
--info-bg: #e8ebfb;
--shadow-1: 0 1px 2px rgba(17, 17, 20, 0.04), 0 4px 12px -2px rgba(17, 17, 20, 0.06);
--shadow-2: 0 4px 8px rgba(17, 17, 20, 0.05), 0 24px 56px -12px rgba(17, 17, 20, 0.12);
}
/* ---------- Base body ---------- */
html,
body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-base);
color: var(--fg-1);
background: var(--bg-canvas);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ============================================================
Semantic type styles
============================================================ */
.prism-display {
font-family: var(--font-serif);
font-size: var(--text-6xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
font-weight: var(--weight-regular);
font-style: italic;
color: var(--fg-1);
}
.prism-h1 {
font-family: var(--font-sans);
font-size: var(--text-5xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-1);
}
.prism-h2 {
font-size: var(--text-3xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
color: var(--fg-1);
}
.prism-h3 {
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
color: var(--fg-1);
}
.prism-h4 {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
color: var(--fg-1);
}
.prism-body {
font-size: var(--text-base);
line-height: var(--leading-base);
color: var(--fg-1);
}
.prism-body-secondary {
font-size: var(--text-base);
line-height: var(--leading-base);
color: var(--fg-2);
}
.prism-caption {
font-size: var(--text-sm);
line-height: var(--leading-snug);
color: var(--fg-3);
}
.prism-eyebrow {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
color: var(--fg-3);
}
.prism-mono {
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0;
color: var(--fg-2);
}
.prism-kbd {
font-family: var(--font-mono);
font-size: var(--text-xs);
padding: 2px 6px;
border-radius: var(--radius-sm);
background: var(--bg-elevated);
border: 1px solid var(--border-default);
color: var(--fg-2);
}
/* ============================================================
Utility — focus ring
============================================================ */
.prism-focus-ring:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: inherit;
}