/* cubek design tokens: shared by the web (cubek.dev) and the console. Dark is the default; light via html[data-theme="light"] (the toggle, stored per viewer). Components live in components.css. Source of truth: design/; apps get copies through design/sync.sh. */ @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root, [data-theme="dark"] { color-scheme: dark; /* Neutrals (dark) */ --bg: #0a0a0a; --bg-subtle: #0e0e0e; --surface: #131313; --surface-2: #1a1a1a; --surface-hover: #202020; --border: #242424; --border-strong: #333333; --text: #fafafa; --text-2: #b4b4b4; --muted: #8f8f8f; /* 6.1:1 on --bg, 5.8:1 on --surface */ --grid-dot: rgba(255, 255, 255, 0.07); --overlay: rgba(0, 0, 0, 0.6); --header-bg: rgba(10, 10, 10, 0.72); /* Brand (cubepath green) */ --accent: #55e200; --accent-hover: #6cf21c; --accent-text: #55e200; /* green used as text on --bg */ --on-accent: #0a0a0a; /* text on an --accent fill (11.6:1) */ --accent-soft: rgba(85, 226, 0, 0.12); --accent-border: rgba(85, 226, 0, 0.35); --focus: #55e200; /* Status */ --ok: #55e200; --warn: #f5b400; --danger: #ff5c5c; --info: #5aa9ff; --ok-soft: rgba(85, 226, 0, 0.12); --warn-soft: rgba(245, 180, 0, 0.14); --danger-soft: rgba(255, 92, 92, 0.14); --info-soft: rgba(90, 169, 255, 0.14); --neutral-soft: rgba(255, 255, 255, 0.06); /* Code */ --code-bg: #0f0f0f; --code-text: #e6e6e6; --code-comment: #8a8a8a; --code-prompt: #55e200; --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border); } /* Theme-independent tokens */ :root { /* Type: Inter for UI and prose, JetBrains Mono for code. */ --font-sans: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 12px; --text-sm: 13px; --text-ui: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 40px; --text-4xl: clamp(40px, 6.4vw, 72px); --leading-tight: 1.1; --leading-ui: 1.45; --leading-prose: 1.7; --tracking-display: -0.035em; --tracking-heading: -0.02em; /* Space (4 px grid), radius, elevation, motion */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 999px; --dur: 150ms; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --container: 1160px; --header-h: 60px; } /* After the dark block: on both match and this one wins; a nested [data-theme] scope (the /design page) works too. */ [data-theme="light"] { color-scheme: light; --bg: #fafafa; --bg-subtle: #f4f4f4; --surface: #ffffff; --surface-2: #f4f4f5; --surface-hover: #ededee; --border: #e4e4e7; --border-strong: #d0d0d4; --text: #0a0a0a; --text-2: #3f3f46; --muted: #62626b; /* 5.8:1 on --bg */ --grid-dot: rgba(0, 0, 0, 0.08); --overlay: rgba(10, 10, 10, 0.35); --header-bg: rgba(250, 250, 250, 0.78); --accent: #2ba600; --accent-hover: #259100; --accent-text: #1f7a00; /* #2BA600 is 3.1:1 on white: text uses a darker step (5.2:1) */ --on-accent: #0a0a0a; /* 6.2:1 on #2BA600; white would be 3.1:1 */ --accent-soft: rgba(43, 166, 0, 0.1); --accent-border: rgba(43, 166, 0, 0.4); --focus: #1f7a00; --ok: #2ba600; --warn: #855800; --danger: #c22626; --info: #1a5fb4; --ok-soft: rgba(43, 166, 0, 0.1); --warn-soft: rgba(133, 88, 0, 0.12); --danger-soft: rgba(194, 38, 38, 0.1); --info-soft: rgba(26, 95, 180, 0.1); --neutral-soft: rgba(0, 0, 0, 0.05); --code-bg: #f4f4f5; --code-text: #18181b; --code-comment: #62626b; --code-prompt: #1f7a00; --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--border); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }