/* Focus Project — design tokens (FOCUS / Sigil reskin). * Dark-first, OKLCH color space, lime-accent default. * Drop-in replacement for tokens.css — variable names stay stable * so every existing component CSS rule picks up the new values * automatically. No template edits required for the recolor. * * Accent variants are switched via body[data-accent=""]: * lime (default) · amber · cyan · magenta · red * * Density modes: body[data-density="compact|comfortable"] (comfortable default) * Shape modes: body[data-shape="sharp|soft"] (soft default) * Chrome overlay: body[data-chrome="solid|scanline"] (solid default) */ :root { /* ── Surfaces ───────────────────────────────────────── OKLCH gives us perceptually-uniform stepping — each surface level brightens by ~0.03 lightness so contrast feels even at every elevation. Hue is locked to 270° (cool blue-grey) for a neutral, tech feel that lets the accent pop. */ --bg: oklch(0.155 0.005 270); --bg-deep: oklch(0.110 0.005 270); --surface: oklch(0.198 0.008 270); --surface-2: oklch(0.230 0.010 270); --surface-3: oklch(0.265 0.011 270); --inset: oklch(0.110 0.005 270); /* ── Borders ───────────────────────────────────────── */ --border-faint: oklch(0.305 0.010 270 / 0.5); --border: oklch(0.305 0.010 270); --border-strong: oklch(0.42 0.012 270); /* ── Text ──────────────────────────────────────────── */ --text: oklch(0.97 0.004 270); --text-dim: oklch(0.82 0.006 270); --text-muted: oklch(0.62 0.008 270); --text-faint: oklch(0.42 0.008 270); --text-on-accent: oklch(0.18 0.05 130); /* Legacy aliases kept for any rule that already references them. */ --muted: oklch(0.62 0.008 270); --faint: oklch(0.42 0.008 270); /* ── Accent: red (Focus brand) ───────────────────────── The brand mark accent. The companion --accent-ink is the light text color used ON the accent surface (so primary button labels have proper contrast). The lime variant is still available via body[data-accent="lime"]. */ --accent: oklch(0.70 0.22 25); --accent-hover: oklch(0.74 0.22 25); --accent-press: oklch(0.60 0.20 25); --accent-soft: oklch(0.70 0.22 25 / 0.16); --accent-dim: oklch(0.50 0.18 25); --accent-ink: oklch(1 0 0); --accent-tint: oklch(0.70 0.22 25 / 0.10); --accent-ring: oklch(0.70 0.22 25 / 0.30); --accent-glow: oklch(0.70 0.22 25 / 0.35); --accent-glow-strong: oklch(0.70 0.22 25 / 0.45); /* ── Status ───────────────────────────────────────────── Decoupled from accent so "active / OK" stays GREEN even when the accent is red — keeps health signals readable at a glance without depending on brand color. */ --ok: oklch(0.82 0.18 145); --warn: oklch(0.82 0.16 75); --info: oklch(0.78 0.13 240); --danger: oklch(0.70 0.18 25); --ok-tint: oklch(0.82 0.18 145 / 0.14); --warn-tint: oklch(0.82 0.16 75 / 0.14); --danger-soft: oklch(0.70 0.18 25 / 0.14); /* ── Type ────────────────────────────────────────────── Geist is Vercel's open-source family. Sized down a touch from Inter at the same px because Geist runs slightly larger on the x-height. JetBrains Mono kept as the monospace fallback if Geist Mono isn't loaded. */ --font-sans: "Geist", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font: var(--font-sans); --mono: var(--font-mono); /* Slightly tighter scale than the previous Inter tokens. */ --fs-xxs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 30px; --fs-3xl: 44px; --fs-4xl: clamp(54px, 8vw, 96px); /* ── Spacing (4px grid) ────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* Density-driven paddings used by .card and table cells. The compact variant nudges these down via body[data-density]. */ --pad-card: 22px; --pad-row: 16px; /* ── Radii ─────────────────────────────────────────── */ --radius: 6px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 10px; --radius-full: 9999px; /* ── Shadows ────────────────────────────────────────── */ --shadow-1: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 1px 2px oklch(0 0 0 / 0.30); --shadow-card: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 1px 2px oklch(0 0 0 / 0.30), 0 8px 22px -6px oklch(0 0 0 / 0.30); --shadow-overlay: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 30px 80px oklch(0 0 0 / 0.55), 0 4px 12px oklch(0 0 0 / 0.45); --shadow-card-hover: 0 1px 0 0 oklch(1 0 0 / 0.05) inset, 0 14px 36px -8px oklch(0 0 0 / 0.5), 0 2px 6px oklch(0 0 0 / 0.35), 0 0 0 1px var(--border-strong); --ring-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ring); /* ── Gradients ────────────────────────────────────── */ --grad-accent: linear-gradient(180deg, oklch(0.76 0.22 25) 0%, var(--accent) 50%, oklch(0.62 0.22 25) 100%); --grad-accent-hover: linear-gradient(180deg, oklch(0.80 0.22 25) 0%, oklch(0.74 0.22 25) 50%, var(--accent) 100%); --grad-surface: linear-gradient(180deg, oklch(0.205 0.008 270) 0%, var(--surface) 100%); --grad-scan: repeating-linear-gradient(135deg, oklch(1 0 0 / 0.012) 0 2px, transparent 2px 7px); /* ── Motion ──────────────────────────────────────────── */ --ease: cubic-bezier(0.16, 0.8, 0.24, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 100ms; --t-base: 180ms; --t-slow: 320ms; --lift-1: -1px; --lift-2: -2px; --lift-3: -3px; /* ── Layout ──────────────────────────────────────────── */ --container: 1280px; --header: 56px; --sidebar: 220px; } /* ── Accent swatches ────────────────────────────────────── Each variant only overrides the accent + status-OK group so the rest of the palette stays neutral. Layout / structure CSS is unchanged; only the highlight color flips. Body attribute set via the tweaks panel (admin-only) or by direct admin preference; default is lime. */ body[data-accent="amber"] { --accent: oklch(0.84 0.16 75); --accent-hover: oklch(0.88 0.16 75); --accent-press: oklch(0.74 0.14 75); --accent-soft: oklch(0.84 0.16 75 / 0.14); --accent-dim: oklch(0.55 0.14 75); --accent-ink: oklch(0.18 0.05 75); --accent-tint: oklch(0.84 0.16 75 / 0.10); --accent-ring: oklch(0.84 0.16 75 / 0.30); --accent-glow: oklch(0.84 0.16 75 / 0.35); --ok: oklch(0.84 0.16 75); --ok-tint: oklch(0.84 0.16 75 / 0.14); --grad-accent: linear-gradient(180deg, oklch(0.88 0.16 75) 0%, var(--accent) 50%, oklch(0.78 0.16 75) 100%); } body[data-accent="cyan"] { --accent: oklch(0.86 0.13 200); --accent-hover: oklch(0.90 0.13 200); --accent-press: oklch(0.76 0.11 200); --accent-soft: oklch(0.86 0.13 200 / 0.16); --accent-dim: oklch(0.55 0.12 200); --accent-ink: oklch(0.18 0.04 200); --accent-tint: oklch(0.86 0.13 200 / 0.10); --accent-ring: oklch(0.86 0.13 200 / 0.30); --accent-glow: oklch(0.86 0.13 200 / 0.35); --ok: oklch(0.86 0.13 200); --ok-tint: oklch(0.86 0.13 200 / 0.14); --grad-accent: linear-gradient(180deg, oklch(0.90 0.13 200) 0%, var(--accent) 50%, oklch(0.80 0.13 200) 100%); } body[data-accent="magenta"] { --accent: oklch(0.78 0.20 340); --accent-hover: oklch(0.82 0.20 340); --accent-press: oklch(0.68 0.18 340); --accent-soft: oklch(0.78 0.20 340 / 0.16); --accent-dim: oklch(0.55 0.18 340); --accent-ink: oklch(0.20 0.05 340); --accent-tint: oklch(0.78 0.20 340 / 0.10); --accent-ring: oklch(0.78 0.20 340 / 0.30); --accent-glow: oklch(0.78 0.20 340 / 0.35); --ok: oklch(0.78 0.20 340); --ok-tint: oklch(0.78 0.20 340 / 0.14); --grad-accent: linear-gradient(180deg, oklch(0.84 0.20 340) 0%, var(--accent) 50%, oklch(0.72 0.20 340) 100%); } body[data-accent="lime"] { --accent: oklch(0.88 0.20 130); --accent-hover: oklch(0.92 0.20 130); --accent-press: oklch(0.78 0.18 130); --accent-soft: oklch(0.88 0.20 130 / 0.14); --accent-dim: oklch(0.55 0.15 130); --accent-ink: oklch(0.18 0.05 130); --accent-tint: oklch(0.88 0.20 130 / 0.10); --accent-ring: oklch(0.88 0.20 130 / 0.30); --accent-glow: oklch(0.88 0.20 130 / 0.35); --grad-accent: linear-gradient(180deg, oklch(0.92 0.20 130) 0%, var(--accent) 50%, oklch(0.82 0.18 130) 100%); } /* ── Density + shape modifiers ─────────────────────────── */ body[data-density="compact"] { --pad-card: 16px; --pad-row: 12px; --s-7: 24px; --s-8: 28px; } body[data-shape="sharp"] { --radius: 2px; --radius-lg: 3px; --radius-sm: 0px; } /* ── Light theme ──────────────────────────────────────── Activated via [data-theme="light"] (set by theme.js based on localStorage). Mirrors every variable so any page picks up the new values without component-CSS rewrites. */ [data-theme="light"] { --bg: oklch(0.985 0.003 270); --bg-deep: oklch(0.96 0.004 270); --surface: oklch(1 0 0); --surface-2: oklch(0.97 0.004 270); --surface-3: oklch(0.94 0.006 270); --inset: oklch(0.965 0.005 270); --border-faint: oklch(0.86 0.008 270 / 0.5); --border: oklch(0.86 0.008 270); --border-strong: oklch(0.78 0.010 270); --text: oklch(0.15 0.010 270); --text-dim: oklch(0.32 0.010 270); --text-muted: oklch(0.48 0.010 270); --text-faint: oklch(0.62 0.010 270); --text-on-accent: oklch(1 0 0); --muted: var(--text-muted); --faint: var(--text-faint); --accent: oklch(0.55 0.22 25); --accent-hover: oklch(0.50 0.22 25); --accent-press: oklch(0.45 0.20 25); --accent-soft: oklch(0.55 0.22 25 / 0.12); --accent-dim: oklch(0.42 0.18 25); --accent-ink: oklch(1 0 0); --accent-tint: oklch(0.55 0.22 25 / 0.08); --accent-ring: oklch(0.55 0.22 25 / 0.28); --accent-glow: oklch(0.55 0.22 25 / 0.22); --ok: oklch(0.50 0.18 145); --warn: oklch(0.62 0.16 75); --danger: oklch(0.55 0.22 25); --ok-tint: oklch(0.50 0.18 145 / 0.10); --warn-tint: oklch(0.62 0.16 75 / 0.10); --danger-soft: oklch(0.55 0.22 25 / 0.10); --shadow-1: 0 1px 0 0 oklch(1 0 0 / 0.6) inset, 0 1px 2px oklch(0 0 0 / 0.06); --shadow-card: 0 1px 0 0 oklch(1 0 0 / 0.7) inset, 0 1px 2px oklch(0 0 0 / 0.05), 0 4px 14px oklch(0 0 0 / 0.06); --shadow-overlay: 0 30px 80px oklch(0 0 0 / 0.18), 0 4px 12px oklch(0 0 0 / 0.12); --shadow-card-hover: 0 1px 0 0 oklch(1 0 0 / 0.8) inset, 0 10px 24px -8px oklch(0 0 0 / 0.14), 0 2px 6px oklch(0 0 0 / 0.08), 0 0 0 1px var(--border-strong); --ring-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ring); --grad-accent: linear-gradient(180deg, oklch(0.62 0.22 25) 0%, var(--accent) 50%, oklch(0.48 0.20 25) 100%); --grad-surface: linear-gradient(180deg, oklch(1 0 0) 0%, oklch(0.99 0.003 270) 100%); --grad-scan: repeating-linear-gradient(135deg, oklch(0 0 0 / 0.014) 0 2px, transparent 2px 7px); }