/* ════════════════════════════════════════════════════════════════ HOLZCOM Comdir C · DESIGN TOKENS Light + dark themes via [data-theme] attribute on . prefers-color-scheme respected when [data-theme] is absent. ═══════════════════════════════════════════════════════════════ */ :root, [data-theme="light"]{ /* surfaces */ --bg: #fafbfc; --side: #f6f7f9; --surface: #ffffff; --surface-2: #fafbfc; --surface-3: #f3f4f7; --overlay: rgba(255,255,255,.86); /* lines */ --line: #e7eaef; --line-2: #d6dae2; --line-3: #c4cad6; /* text */ --text: #0a0d14; --soft: #2a3142; --dim: #5f6878; --muted: #98a0b0; --faint: #c0c6d2; /* semantic */ --good: #0d9488; --good-soft: #ecfdf6; --good-line: rgba(13,148,136,.22); --warn: #b45309; --warn-soft: #fef7e8; --warn-line: rgba(180,83,9,.22); --bad: #b91c1c; --bad-soft: #fdedee; --bad-line: rgba(185,28,28,.22); --info: #1d4ed8; --info-soft: #eef2ff; --info-line: rgba(29,78,216,.22); --plum: #6d28d9; --plum-soft: #f6f1ff; --plum-line: rgba(109,40,217,.22); /* brand accent (emerald, Linear/Gong light) */ --accent: #0d9488; --accent-soft: rgba(13,148,136,.08); --accent-line: rgba(13,148,136,.22); --accent-strong:#0f766e; /* shadows */ --sh-1: 0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03); --sh-2: 0 4px 14px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.04); --sh-3: 0 14px 32px rgba(15,23,42,.10), 0 4px 10px rgba(15,23,42,.06); --sh-hero: 0 30px 80px -28px rgba(15,23,42,.18), 0 8px 16px rgba(15,23,42,.04); --sh-glow: 0 0 0 4px rgba(13,148,136,.16); --ring-accent: rgba(13,148,136,.45); --ring-bad: rgba(185,28,28,.45); --ring-warn: rgba(180,83,9,.45); } [data-theme="dark"]{ --bg: #0a0a0c; --side: #0d0d10; --surface: #131316; --surface-2: #1a1a1f; --surface-3: #20202a; --overlay: rgba(10,10,12,.82); --line: #23232a; --line-2: #2c2c35; --line-3: #383844; --text: #ededf0; --soft: #c8c8d0; --dim: #9696a0; --muted: #6c6c78; --faint: #46464e; --good: #34d399; --good-soft: rgba(52,211,153,.10); --good-line: rgba(52,211,153,.30); --warn: #fbbf24; --warn-soft: rgba(251,191,36,.10); --warn-line: rgba(251,191,36,.30); --bad: #fb7185; --bad-soft: rgba(251,113,133,.10); --bad-line: rgba(251,113,133,.30); --info: #60a5fa; --info-soft: rgba(96,165,250,.10); --info-line: rgba(96,165,250,.30); --plum: #a78bfa; --plum-soft: rgba(167,139,250,.10); --plum-line: rgba(167,139,250,.30); --accent: #34d399; --accent-soft: rgba(52,211,153,.10); --accent-line: rgba(52,211,153,.30); --accent-strong:#10b981; --sh-1: 0 1px 2px rgba(0,0,0,.3); --sh-2: 0 4px 14px rgba(0,0,0,.35); --sh-3: 0 14px 32px rgba(0,0,0,.5); --sh-hero: 0 30px 80px -28px rgba(0,0,0,.7); --sh-glow: 0 0 0 4px rgba(52,211,153,.22); } /* honor system preference when [data-theme] not explicitly set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]){ color-scheme: dark; } :root:not([data-theme]), :root:not([data-theme="light"]):not([data-theme="dark"]){ --bg: #0a0a0c; --side: #0d0d10; --surface: #131316; --surface-2: #1a1a1f; --surface-3: #20202a; --overlay: rgba(10,10,12,.82); --line: #23232a; --line-2: #2c2c35; --line-3: #383844; --text: #ededf0; --soft: #c8c8d0; --dim: #9696a0; --muted: #6c6c78; --faint: #46464e; --good:#34d399; --good-soft:rgba(52,211,153,.10); --good-line:rgba(52,211,153,.30); --warn:#fbbf24; --warn-soft:rgba(251,191,36,.10); --warn-line:rgba(251,191,36,.30); --bad:#fb7185; --bad-soft:rgba(251,113,133,.10); --bad-line:rgba(251,113,133,.30); --info:#60a5fa; --info-soft:rgba(96,165,250,.10); --info-line:rgba(96,165,250,.30); --plum:#a78bfa; --plum-soft:rgba(167,139,250,.10); --plum-line:rgba(167,139,250,.30); --accent:#34d399; --accent-soft:rgba(52,211,153,.10); --accent-line:rgba(52,211,153,.30); --accent-strong:#10b981; } } /* typography scale */ :root{ --ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ff-serif: "Fraunces", Georgia, serif; --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-28:28px; --fs-32:32px; --fs-40:40px; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px; --r-2xl:14px; --r-3xl:18px; --r-full:999px; --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:12px; --sp-6:14px; --sp-7:18px; --sp-8:22px; --sp-9:28px; --sp-10:36px; }