/* ========================================================================== Diveroid Ocean Ops · Design Tokens Drop-in CSS variables. Apply . ========================================================================== */ :root { color-scheme: dark; /* ── Surfaces ─────────────────────────────────────────────── */ --do-bg: oklch(16% 0.02 240); --do-sidebar: oklch(14% 0.022 242); --do-panel: oklch(20% 0.022 238); --do-panel-2: oklch(24% 0.022 236); --do-line: oklch(30% 0.022 235); --do-line-soft: oklch(26% 0.018 236); /* ── Ink ─────────────────────────────────────────────────── */ --do-ink: oklch(96% 0.008 220); --do-ink-dim: oklch(72% 0.018 225); --do-ink-faint: oklch(55% 0.02 230); /* ── Accents ─────────────────────────────────────────────── */ --do-tide: oklch(74% 0.14 218); --do-tide-bright: oklch(82% 0.15 205); --do-biolum: oklch(86% 0.17 185); --do-coral: oklch(74% 0.16 30); --do-amber: oklch(82% 0.16 80); --do-violet: oklch(72% 0.16 305); /* ── Radius / Space / Font ───────────────────────────────── */ --do-radius-sm: 8px; --do-radius: 14px; --do-radius-lg: 20px; --do-radius-pill: 999px; --do-space-1: 4px; --do-space-2: 8px; --do-space-3: 12px; --do-space-4: 16px; --do-space-5: 20px; --do-space-6: 28px; --do-space-7: 40px; --do-font-kr: "Pretendard Variable", Pretendard, "Inter Tight", ui-sans-serif, -apple-system, sans-serif; --do-font-sans: "Inter Tight", "Pretendard Variable", Pretendard, ui-sans-serif, sans-serif; --do-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } html[data-theme="light"] { color-scheme: light; --do-bg: oklch(97% 0.005 225); --do-sidebar: oklch(99% 0.003 225); --do-panel: oklch(100% 0 0); --do-panel-2: oklch(97% 0.005 225); --do-line: oklch(88% 0.01 228); --do-line-soft: oklch(93% 0.006 225); --do-ink: oklch(20% 0.03 238); --do-ink-dim: oklch(42% 0.03 232); --do-ink-faint: oklch(58% 0.025 232); --do-tide: oklch(52% 0.15 225); --do-tide-bright: oklch(56% 0.15 215); --do-biolum: oklch(58% 0.15 190); } @media (prefers-reduced-motion: reduce) { .do-pulse, .do-ping { animation: none !important; } }