/* ============================================================ Klarhet — Design Tokens (Editorial / Swiss) Sharp corners, hairline borders, monochrome surfaces, single blue accent, single red danger. No shadows, no glass. Theme via [data-theme="dark"] on . ============================================================ */ :root { /* — Type — */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Manrope', 'Inter', system-ui, sans-serif; --font-mono: 'Space Grotesk', ui-monospace, SFMono-Regular, monospace; /* — Spacing (4px base) — */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* — Radii (sharp by default) — */ --r-0: 0px; --r-1: 2px; --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-xl: 0px; --r-2xl: 0px; --r-pill: 0px; /* — Hairline border width — */ --hairline: 1px; /* — Motion — */ --t-fast: 100ms; --t-med: 160ms; --ease: cubic-bezier(0.2, 0.9, 0.3, 1); /* — Light theme — */ --bg: #f4f4f5; --surface: #ffffff; --surface-alt: #fafafa; --surface-hover:#f1f1f3; --surface-solid:#ffffff; --line: #1a1a1a14; --line-strong: #1a1a1a26; --line-bold: #1a1a1a; --text: #0a0a0a; --text-dim: #6b6b75; --text-faint: #a0a0aa; --accent: #1e5bff; --accent-fg: #ffffff; --accent-soft: #e7eeff; --accent-soft-fg:#1e5bff; --danger: #c8102e; --danger-fg: #ffffff; --danger-soft: #fde2e6; --danger-soft-fg:#a30d24; --warn: #b45309; --warn-soft: #fef3c7; --warn-soft-fg: #92400e; --pos: #15803d; --pos-soft: #dcfce7; --pos-soft-fg: #166534; /* — Per-project markers — */ --proj-blue: #1e5bff; --proj-red: #c8102e; --proj-amber: #b45309; --proj-green: #15803d; /* — Legacy aliases (templates still reference these) — */ --bg-base: var(--bg); --stroke: var(--line); --stroke-strong: var(--line-strong); --neg: var(--danger); --neg-soft: var(--danger-soft); --accent-hover: #1550e0; --accent-ink: #ffffff; --accent-soft-old: rgba(30,91,255,0.12); --glass-border: var(--line); --shadow-card: none; --shadow-hover: none; --shadow-modal: none; --shadow-accent: none; --glass-blur: none; --sidebar-width: 220px; /* Legacy spacing */ --space-1: var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3); --space-4: var(--sp-4); --space-5: var(--sp-5); --space-6: var(--sp-6); --space-8: var(--sp-8); --space-10: var(--sp-10); --space-12: var(--sp-12); --space-16: 64px; --space-20: 80px; /* Legacy radius (all zero now) */ --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; /* Legacy type scale */ --display-lg: 2.75rem; --display-md: 1.75rem; --headline-lg: 1.75rem; --headline-sm: 1.375rem; --title-lg: 1.125rem; --title-md: 1rem; --body-lg: 0.875rem; --body-md: 0.8125rem; --body-sm: 0.75rem; --label-md: 0.6875rem; --label-sm: 0.625rem; /* Legacy color aliases */ --primary: var(--accent); --primary-dim: var(--accent-hover); --primary-container: var(--accent-soft); --on-primary: #fff; --error: var(--danger); --error-container: var(--danger-soft); --on-error: #fff; --on-error-container: var(--danger); --background: var(--bg); --surface-container-lowest: var(--surface-alt); --surface-container-low: var(--surface-alt); --surface-container: var(--surface); --surface-container-high: var(--surface-solid); --surface-container-highest: var(--surface-solid); --on-surface: var(--text); --on-surface-variant: var(--text-dim); --outline: var(--text-faint); --outline-variant: var(--line); --tertiary: var(--text-dim); --tertiary-container: var(--accent-soft); --on-tertiary: #fff; --on-tertiary-container: var(--text-dim); --secondary-container: var(--surface-solid); --on-secondary-container: var(--text-dim); --on-secondary-fixed: var(--text-faint); --font-body: var(--font-sans); --font-technical: var(--font-mono); } /* — Dark theme — */ [data-theme="dark"] { --bg: #0a0a0b; --surface: #131315; --surface-alt: #1a1a1d; --surface-hover:#202024; --surface-solid:#131315; --line: #ffffff14; --line-strong: #ffffff26; --line-bold: #f4f4f5; --text: #f4f4f5; --text-dim: #9b9ba3; --text-faint: #5d5d66; --accent: #4d7cff; --accent-hover: #6d96ff; --accent-soft: #1e2a4f; --accent-soft-fg:#9bb4ff; --danger: #ef3b54; --danger-soft: #3a1217; --danger-soft-fg:#ff8c9c; --warn: #fbbf24; --warn-soft: #3a2a08; --warn-soft-fg: #fbbf24; --pos: #4ade80; --pos-soft: #0e2a18; --pos-soft-fg: #4ade80; --proj-blue: #4d7cff; --proj-red: #ef3b54; --proj-amber: #fbbf24; --proj-green: #4ade80; /* Legacy dark */ --neg: var(--danger); --neg-soft: var(--danger-soft); --error-container: var(--danger-soft); --surface-container-lowest: var(--surface-alt); --surface-container-low: var(--surface-alt); --surface-container: var(--surface); --surface-container-high: var(--surface-solid); --surface-container-highest: var(--surface-solid); } /* Per-project accent helpers */ .proj--blue { --proj-accent: var(--proj-blue); } .proj--red { --proj-accent: var(--proj-red); } .proj--amber { --proj-accent: var(--proj-amber); } .proj--green { --proj-accent: var(--proj-green); } /* Legacy project accent names */ .proj--violet { --proj-accent: var(--proj-blue); } .proj--rose { --proj-accent: var(--proj-red); } .proj--teal { --proj-accent: var(--proj-green); }