/* ============================================================ Kaji — design tokens Dark, modern, fast pro-tool aesthetic. All colors oklch. Theme is driven by data-* attributes on so Tweaks can repaint the whole app instantly. ============================================================ */ :root { /* --- accent hue (Tweakable). default = violet --- */ --acc-h: 295; --acc-c: 0.165; --accent: oklch(0.685 var(--acc-c) var(--acc-h)); --accent-hi: oklch(0.745 var(--acc-c) var(--acc-h)); --accent-press: oklch(0.62 var(--acc-c) var(--acc-h)); --accent-dim: oklch(0.42 0.10 var(--acc-h)); --accent-ghost: oklch(0.685 var(--acc-c) var(--acc-h) / 0.14); --accent-ghost2: oklch(0.685 var(--acc-c) var(--acc-h) / 0.07); --on-accent: oklch(0.16 0.01 var(--acc-h)); /* --- surfaces (Tweakable tone via --srf-h / --srf-c) --- */ --srf-h: 270; --srf-c: 0.007; --bg-0: oklch(0.165 var(--srf-c) var(--srf-h)); /* app backdrop / titlebar */ --bg-1: oklch(0.196 var(--srf-c) var(--srf-h)); /* panels, sidebar */ --bg-2: oklch(0.228 var(--srf-c) var(--srf-h)); /* cards */ --bg-3: oklch(0.262 calc(var(--srf-c) + 0.001) var(--srf-h)); /* inputs, hover */ --bg-4: oklch(0.305 calc(var(--srf-c) + 0.002) var(--srf-h)); /* active/raised */ --line: oklch(0.30 var(--srf-c) var(--srf-h)); --line-soft: oklch(0.26 var(--srf-c) var(--srf-h)); --line-strong: oklch(0.40 var(--srf-c) var(--srf-h)); --tx-hi: oklch(0.965 0.003 var(--srf-h)); --tx: oklch(0.80 0.004 var(--srf-h)); --tx-mid: oklch(0.66 0.006 var(--srf-h)); --tx-low: oklch(0.52 0.007 var(--srf-h)); --tx-faint: oklch(0.42 0.007 var(--srf-h)); /* --- status (shared chroma family) --- */ --ok: oklch(0.74 0.15 158); --ok-dim:oklch(0.74 0.15 158 / 0.14); --warn: oklch(0.80 0.14 78); --warn-dim:oklch(0.80 0.14 78 / 0.14); --err: oklch(0.68 0.18 25); --err-dim:oklch(0.68 0.18 25 / 0.14); --info: oklch(0.72 0.13 240); --info-dim:oklch(0.72 0.13 240 / 0.14); /* --- type --- */ --sans: "Hanken Grotesk", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* --- density (Tweakable) --- */ --u: 4px; /* base unit */ --row-h: 36px; /* list row height */ --pad: 20px; /* panel padding */ --radius: 10px; --radius-sm: 7px; --radius-lg: 14px; --fs: 13.5px; /* base UI font size */ --shadow-1: 0 1px 0 oklch(1 0 0 / 0.03) inset, 0 1px 2px oklch(0 0 0 / 0.4); --shadow-2: 0 8px 30px oklch(0 0 0 / 0.45), 0 2px 6px oklch(0 0 0 / 0.3); --shadow-pop: 0 16px 50px oklch(0 0 0 / 0.6), 0 0 0 1px var(--line); --speed: 140ms; --ease: cubic-bezier(0.32, 0.72, 0, 1); } /* density: compact */ :root[data-density="compact"] { --row-h: 30px; --pad: 14px; --radius: 8px; --radius-sm: 6px; --fs: 12.5px; } /* surface tone variants */ :root[data-tone="warm"] { --srf-h: 60; --srf-c: 0.009; } :root[data-tone="black"] { --srf-h: 270; --srf-c: 0.003; } :root[data-tone="black"] { --bg-0: oklch(0.115 0.003 270); --bg-1: oklch(0.15 0.003 270); --bg-2: oklch(0.185 0.003 270); --bg-3: oklch(0.225 0.004 270); --bg-4: oklch(0.27 0.005 270); } /* accent usage: subtle dials chroma down a touch globally */ :root[data-accent-usage="subtle"] { --acc-c: 0.11; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: var(--sans); font-size: var(--fs); color: var(--tx); background: var(--bg-0); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.005em; } ::selection { background: var(--accent-ghost); color: var(--tx-hi); } /* scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--tx-faint); background-clip: content-box; } /* utility primitives shared across components */ .mono { font-family: var(--mono); font-feature-settings: "zero" 1; letter-spacing: -0.01em; } .tnum { font-variant-numeric: tabular-nums; } .clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kbd { font-family: var(--mono); font-size: 0.75em; padding: 2px 6px; border-radius: 5px; background: var(--bg-3); border: 1px solid var(--line); color: var(--tx-mid); border-bottom-width: 2px; } /* settings rows: hairline between consecutive rows only */ .set-row + .set-row { border-top: 1px solid var(--line-soft); } /* dotted/striped image placeholder */ .placeholder { background-color: var(--bg-2); background-image: repeating-linear-gradient( -45deg, transparent 0 9px, oklch(1 0 0 / 0.022) 9px 18px); display: flex; align-items: center; justify-content: center; color: var(--tx-faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* Entrance anims animate transform/background only — never opacity to 0 — so content stays visible if the animation clock is paused (capture, PDF, background tab, reduced-motion). */ @keyframes fade-in { from { transform: translateY(4px); } to { transform: none; } } @keyframes modal-pop { from { transform: translateY(8px) scale(0.985); } to { transform: none; } } @keyframes log-in { from { background: var(--accent-ghost2); } to { background: transparent; } } @keyframes consent-in { from { transform: translateY(-12px) scale(0.97); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } }