/* Symphora design tokens. All colors authored in oklch. Themed via data-theme on . Density via data-density. Brand hue is a single CSS variable so the accent swatch can swap. */ :root { /* --- Brand (swappable) --- */ --brand-h: 230; --brand-c: 0.14; --brand-l: 0.55; --accent: oklch(var(--brand-l) var(--brand-c) var(--brand-h)); --accent-hover: oklch(calc(var(--brand-l) - 0.05) var(--brand-c) var(--brand-h)); --accent-soft: oklch(0.95 0.03 var(--brand-h)); --accent-ink: oklch(0.32 0.12 var(--brand-h)); --accent-line: oklch(0.86 0.06 var(--brand-h)); /* --- Surfaces & lines --- */ --paper: oklch(0.99 0.003 90); --paper-2: oklch(0.97 0.004 90); --paper-3: oklch(0.945 0.005 90); --line: oklch(0.91 0.005 260); --line-2: oklch(0.95 0.004 260); /* --- Ink (text + icons) --- */ --ink: oklch(0.18 0.01 260); --ink-2: oklch(0.38 0.01 260); --ink-3: oklch(0.58 0.01 260); --ink-4: oklch(0.75 0.005 260); --on-accent: oklch(0.99 0.003 90); /* --- Status (single semantic palette) --- */ --good: oklch(0.62 0.14 155); --good-soft: oklch(0.95 0.04 155); --good-ink: oklch(0.36 0.12 155); --warn: oklch(0.72 0.16 75); --warn-soft: oklch(0.96 0.05 75); --warn-ink: oklch(0.44 0.13 75); --bad: oklch(0.6 0.18 25); --bad-soft: oklch(0.96 0.04 25); --bad-ink: oklch(0.42 0.16 25); /* --- Type --- */ --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* --- Scale (density multiplier applies to spacing) --- */ --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 14px; --t-lg: 17px; --t-xl: 22px; --t-2xl: 28px; --t-3xl: 40px; --t-display: 56px; --density: 1; --s-1: calc(4px * var(--density)); --s-2: calc(8px * var(--density)); --s-3: calc(12px * var(--density)); --s-4: calc(16px * var(--density)); --s-5: calc(24px * var(--density)); --s-6: calc(32px * var(--density)); --s-7: calc(48px * var(--density)); --s-8: calc(64px * var(--density)); --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-full: 999px; --shadow-sm: 0 1px 0 oklch(0.18 0.01 260 / 0.04), 0 1px 2px oklch(0.18 0.01 260 / 0.04); --shadow-md: 0 1px 0 oklch(0.18 0.01 260 / 0.05), 0 8px 24px oklch(0.18 0.01 260 / 0.07); --shadow-lg: 0 4px 12px oklch(0.18 0.01 260 / 0.08), 0 24px 60px oklch(0.18 0.01 260 / 0.12); --nav-h: 56px; --sidebar-w: 232px; --sidebar-w-collapsed: 60px; --content-max: 1240px; --ease: cubic-bezier(.2,.7,.3,1); } /* ---- Dark theme ---- */ :root[data-theme="dark"] { --paper: oklch(0.18 0.005 260); --paper-2: oklch(0.215 0.006 260); --paper-3: oklch(0.255 0.007 260); --line: oklch(0.32 0.008 260); --line-2: oklch(0.26 0.006 260); --ink: oklch(0.97 0.003 90); --ink-2: oklch(0.78 0.005 90); --ink-3: oklch(0.6 0.006 90); --ink-4: oklch(0.45 0.006 90); --accent-soft: oklch(0.3 0.08 var(--brand-h)); --accent-ink: oklch(0.78 0.1 var(--brand-h)); --accent-line: oklch(0.38 0.1 var(--brand-h)); --good-soft: oklch(0.3 0.06 155); --warn-soft: oklch(0.32 0.06 75); --bad-soft: oklch(0.32 0.07 25); --good-ink: oklch(0.78 0.12 155); --warn-ink: oklch(0.8 0.13 75); --bad-ink: oklch(0.78 0.14 25); --shadow-sm: 0 1px 0 oklch(0 0 0 / 0.4), 0 1px 2px oklch(0 0 0 / 0.4); --shadow-md: 0 1px 0 oklch(0 0 0 / 0.5), 0 8px 24px oklch(0 0 0 / 0.5); --shadow-lg: 0 4px 12px oklch(0 0 0 / 0.6), 0 24px 60px oklch(0 0 0 / 0.7); } /* ---- Density variants ---- */ :root[data-density="compact"] { --density: 0.78; } :root[data-density="comfortable"] { --density: 1.18; } /* ---- Branded vs neutral ---- "neutral" = ink-only buttons & links (no brand color anywhere except status). */ :root[data-brand="neutral"] { --accent: var(--ink); --accent-hover: var(--ink-2); --accent-soft: var(--paper-3); --accent-ink: var(--ink); --accent-line: var(--line); } /* ---- Base ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--paper-2); color: var(--ink); font-family: var(--font-sans); font-size: var(--t-base); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; } input, select, textarea { font: inherit; color: inherit; } img { display: block; max-width: 100%; } svg { display: block; } /* ---- Utility ---- */ .mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1, 'cv11' 1; } .tnum { font-variant-numeric: tabular-nums; } .caps { text-transform: uppercase; letter-spacing: 0.08em; } .muted { color: var(--ink-3); } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---- Focus ring (consistent across all components) ---- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }