/* ============================================================ Depot Design System — Tokens Warm cream canvas · emerald accent · stone neutrals. Light theme on :root, dark theme on [data-theme="dark"]. Toggle by setting document.documentElement.dataset.theme = 'dark' ============================================================ */ /* Fonts — add this to your (or @import at top of CSS): https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Geist+Mono:wght@400;500;600&display=swap */ :root { /* Type */ --font-sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; --font-display: 'Bricolage Grotesque', 'Schibsted Grotesk', ui-sans-serif, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; /* Surfaces & text */ --background: oklch(0.977 0.008 84); --foreground: oklch(0.245 0.012 56); --card: oklch(1 0 0); --card-foreground: oklch(0.245 0.012 56); --popover: oklch(1 0 0); --popover-foreground: oklch(0.245 0.012 56); --muted: oklch(0.951 0.012 84); --muted-foreground: oklch(0.52 0.018 60); /* Brand & accent */ --primary: oklch(0.596 0.145 163); /* emerald */ --primary-foreground: oklch(0.985 0.001 106.423); --secondary: oklch(0.95 0.026 163); /* mint */ --secondary-foreground: oklch(0.378 0.077 168.94); --accent: oklch(0.954 0.038 80); /* peach */ --accent-foreground: oklch(0.473 0.137 46.201); /* Status */ --destructive: oklch(0.577 0.245 27.325); --success: oklch(0.596 0.145 163); --warning: oklch(0.769 0.16 70); --info: oklch(0.62 0.13 233); /* Links (dark enough to read on cream) */ --link: oklch(0.47 0.12 164); --link-hover: oklch(0.38 0.11 164); --link-visited: oklch(0.46 0.12 300); /* Lines & focus */ --border: oklch(0.912 0.014 84); --input: oklch(0.912 0.014 84); --ring: oklch(0.596 0.145 163); /* Chart palette */ --chart-1: oklch(0.696 0.17 162.48); --chart-2: oklch(0.746 0.16 232.661); --chart-3: oklch(0.702 0.183 293.541); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.712 0.194 13.428); /* Code surfaces + syntax highlighting */ --code-bg: oklch(0.972 0.011 83); --code-border: oklch(0.9 0.014 84); --code-inline-bg: oklch(0.95 0.02 84); --syn-keyword: oklch(0.52 0.17 293); --syn-string: oklch(0.5 0.13 150); --syn-number: oklch(0.55 0.14 55); --syn-comment: oklch(0.62 0.02 80); --syn-function: oklch(0.5 0.14 233); --syn-tag: oklch(0.55 0.19 27); --syn-attr: oklch(0.52 0.13 55); --syn-punct: oklch(0.45 0.02 60); /* Shape & elevation */ --radius-sm: 8px; --radius: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --shadow-soft: 0 1px 2px oklch(0.25 0.04 70 / 0.05), 0 16px 40px -20px oklch(0.3 0.08 70 / 0.16); /* Ambient canvas glow (optional page background-image) */ --canvas-gradient: radial-gradient(1100px 520px at 88% -10%, oklch(0.94 0.05 163 / 0.5), transparent 60%), radial-gradient(900px 480px at -8% 4%, oklch(0.96 0.045 80 / 0.55), transparent 55%); } [data-theme="dark"] { --background: oklch(0.165 0.005 56); --foreground: oklch(0.985 0.001 106.423); --card: oklch(0.216 0.006 56.043); --card-foreground: oklch(0.985 0.001 106.423); --popover: oklch(0.216 0.006 56.043); --popover-foreground: oklch(0.985 0.001 106.423); --muted: oklch(0.268 0.007 34.298); --muted-foreground: oklch(0.709 0.01 56.259); --primary: oklch(0.696 0.17 162.48); --primary-foreground: oklch(0.19 0.02 160); --secondary: oklch(0.3 0.03 165); --secondary-foreground: oklch(0.92 0.03 165); --accent: oklch(0.31 0.04 70); --accent-foreground: oklch(0.9 0.05 75); --destructive: oklch(0.704 0.191 22.216); --success: oklch(0.696 0.17 162.48); --warning: oklch(0.82 0.17 80); --info: oklch(0.72 0.14 233); --link: oklch(0.8 0.14 163); --link-hover: oklch(0.88 0.12 163); --link-visited: oklch(0.78 0.11 300); --border: oklch(1 0 0 / 0.1); --input: oklch(1 0 0 / 0.15); --ring: oklch(0.696 0.17 162.48); --code-bg: oklch(0.24 0.008 56); --code-border: oklch(1 0 0 / 0.1); --code-inline-bg: oklch(1 0 0 / 0.08); --syn-keyword: oklch(0.8 0.13 300); --syn-string: oklch(0.8 0.14 150); --syn-number: oklch(0.82 0.12 60); --syn-comment: oklch(0.62 0.02 80); --syn-function: oklch(0.78 0.12 233); --syn-tag: oklch(0.78 0.15 20); --syn-attr: oklch(0.82 0.12 60); --syn-punct: oklch(0.75 0.02 80); --shadow-soft: 0 1px 2px rgba(0,0,0,0.3), 0 18px 44px -22px rgba(0,0,0,0.6); --canvas-gradient: radial-gradient(1100px 520px at 88% -10%, oklch(0.5 0.09 163 / 0.18), transparent 60%), radial-gradient(900px 480px at -8% 4%, oklch(0.55 0.07 72 / 0.16), transparent 55%); } /* --- Base --- */ body { background: var(--background); background-image: var(--canvas-gradient); background-attachment: fixed; color: var(--foreground); font-family: var(--font-sans); font-variant-numeric: tabular-nums; line-height: 1.5; } /* --- highlight.js class map (bind hljs to the syntax tokens) --- */ .hljs { color: var(--foreground); background: transparent; } .hljs-comment, .hljs-quote { color: var(--syn-comment); font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-literal { color: var(--syn-keyword); } .hljs-string, .hljs-attr-value, .hljs-regexp { color: var(--syn-string); } .hljs-number, .hljs-bullet { color: var(--syn-number); } .hljs-title, .hljs-title.function_, .hljs-section { color: var(--syn-function); font-weight: 600; } .hljs-tag, .hljs-name, .hljs-deletion { color: var(--syn-tag); } .hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: var(--syn-attr); } .hljs-punctuation, .hljs-operator { color: var(--syn-punct); } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; } /* --- Rendered content ("prose") --- */ .prose { color: var(--foreground); font-family: var(--font-sans); font-size: 15px; line-height: 1.72; } .prose > *:first-child { margin-top: 0; } .prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.2; margin: 1.6em 0 .6em; } .prose h1 { font-size: 1.9em; font-weight: 800; } .prose h2 { font-size: 1.5em; font-weight: 700; padding-bottom: .24em; border-bottom: 1px solid var(--border); } .prose h3 { font-size: 1.22em; font-weight: 700; } .prose p { margin: .85em 0; } .prose a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .prose ul, .prose ol { margin: .85em 0; padding-left: 1.5em; } .prose blockquote { margin: 1em 0; padding: .4em 1.1em; border-left: 3px solid var(--primary); background: color-mix(in oklab, var(--primary) 6%, transparent); border-radius: 0 10px 10px 0; color: var(--muted-foreground); } .prose code { font-family: var(--font-mono); font-size: .88em; background: var(--code-inline-bg); padding: .15em .4em; border-radius: 6px; } .prose pre { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 12px; padding: 14px 16px; overflow: auto; margin: 1em 0; } .prose pre code { background: none; padding: 0; font-size: 13px; line-height: 1.6; } .prose table { border-collapse: collapse; width: 100%; margin: 1em 0; } .prose th, .prose td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; } .prose th { background: var(--muted); font-weight: 600; } .prose hr { border: none; border-top: 1px solid var(--border); margin: 1.8em 0; }