/* ========================================================================== Diplodocus — Core Theme Variables (Mintlify-aligned) -------------------------------------------------------------------------- THE contract: every colour, font, radius, and shadow lives here. Structural CSS (notiva.css) must only reference var(--dc-*) — no hex. Override this file to rebrand the whole site — nothing else need change. ========================================================================== */ :root { /* ── Brand (Diplodocus teal + purple) ──────────────────────── */ --dc-brand-primary: rgb(0 185 158); /* #00B99E — logo cyan-teal, light mode */ --dc-brand-primary-hover: rgb(0 162 138); /* #00A28A */ --dc-brand-primary-soft: rgb(0 185 158 / 0.08); --dc-brand-primary-muted: rgb(0 185 158 / 0.14); --dc-brand-primary-light: rgb(0 232 196); /* #00E8C4 — vivid cyan-teal for dark mode */ --dc-brand-accent: rgb(139 92 246); /* #8B5CF6 — logo purple */ /* ── Grayscale (Mintlify warm-neutral) ─────────────────────── */ --dc-gray-50: rgb(243 246 244); /* #f3f6f4 */ --dc-gray-100: rgb(238 241 239); /* #eef1ef */ --dc-gray-200: rgb(223 225 224); /* #dfe1e0 */ --dc-gray-300: rgb(206 209 207); /* #ced1cf */ --dc-gray-400: rgb(159 161 160); /* #9fa1a0 */ --dc-gray-500: rgb(112 115 113); /* #707371 */ --dc-gray-600: rgb(80 83 81); /* #505351 */ --dc-gray-700: rgb(63 65 64); /* #3f4140 */ --dc-gray-800: rgb(38 40 39); /* #262827 */ --dc-gray-900: rgb(23 26 24); /* #171a18 */ --dc-gray-950: rgb(10 13 12); /* #0a0d0c */ /* ── Surfaces ──────────────────────────────────────────────── */ --dc-bg-base: #ffffff; --dc-bg-surface: #ffffff; --dc-bg-elevated: var(--dc-gray-50); --dc-bg-sidebar: #ffffff; --dc-bg-code: var(--dc-gray-900); --dc-bg-code-alt: var(--dc-gray-800); --dc-bg-hover: var(--dc-gray-100); /* ── Text ──────────────────────────────────────────────────── */ --dc-text-primary: var(--dc-gray-800); --dc-text-secondary: var(--dc-gray-600); --dc-text-muted: var(--dc-gray-500); --dc-text-subtle: var(--dc-gray-400); --dc-text-inverse: #ffffff; --dc-text-link: var(--dc-brand-primary); --dc-text-link-hover: var(--dc-brand-primary-hover); --dc-text-code: var(--dc-gray-200); /* ── Borders & dividers ────────────────────────────────────── */ --dc-border-subtle: var(--dc-gray-100); --dc-border-default: var(--dc-gray-200); --dc-border-strong: var(--dc-gray-300); --dc-border-focus: var(--dc-brand-primary); /* ── Typography ────────────────────────────────────────────── */ --dc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif; --dc-font-mono: 'JetBrains Mono', 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --dc-font-size-base: 16px; --dc-line-height: 1.625; /* ── Spacing scale ─────────────────────────────────────────── */ --dc-space-1: 0.25rem; --dc-space-2: 0.5rem; --dc-space-3: 0.75rem; --dc-space-4: 1rem; --dc-space-5: 1.25rem; --dc-space-6: 1.5rem; --dc-space-8: 2rem; /* ── Radii (Mintlify) ──────────────────────────────────────── */ --dc-radius-sm: 0.375rem; /* 6px buttons/inline code */ --dc-radius-md: 0.5rem; /* 8px inputs */ --dc-radius-lg: 0.875rem; /* 14px code blocks */ --dc-radius-xl: 1rem; /* 16px cards */ --dc-radius-full: 9999px; /* pill toggles */ /* ── Shadows (Mintlify is mostly shadowless, uses borders) ── */ --dc-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04); --dc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.04); --dc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.04); --dc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04); --dc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.16); /* ── Syntax highlighting (hljs / shiki-ish) ────────────────── */ --dc-hl-keyword: #ff7b72; --dc-hl-string: #79c0ff; --dc-hl-number: #f0883e; --dc-hl-comment: #8b949e; /* ── Layout dimensions (Mintlify) ──────────────────────────── */ --dc-sidebar-width: 16rem; /* 256px — was 288px */ --dc-toc-width: 14rem; /* 224px — was 288px */ --dc-header-height: 3rem; /* 48px */ --dc-content-max: 860px; /* prose container — was 696px */ /* ── Table headers (neutral Mintlify-style) ────────────────── */ --dc-table-header-bg: var(--dc-gray-50); --dc-table-header-text: var(--dc-text-primary); --dc-table-row-alt: var(--dc-gray-50); --dc-table-row-hover: var(--dc-gray-100); } /* Dark-mode override — same variable names, different values. activates this. Dark is the site default. */ :root[data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"] { /* ── Backgrounds (Mintlify near-black) ─────────────────────── */ --dc-bg-base: rgb(10 11 11); /* #0a0b0b — page */ --dc-bg-surface: rgb(14 16 16); /* #0e1010 — cards, header */ --dc-bg-elevated: rgb(20 23 23); /* #141717 — slightly lifted panels */ --dc-bg-sidebar: rgb(10 11 11); /* same as base */ --dc-bg-hover: rgb(28 32 32); /* hover state */ /* ── Text ──────────────────────────────────────────────────── */ --dc-text-primary: var(--dc-gray-100); --dc-text-secondary: var(--dc-gray-300); --dc-text-muted: var(--dc-gray-400); --dc-text-subtle: var(--dc-gray-600); /* ── Borders ───────────────────────────────────────────────── */ --dc-border-subtle: rgb(255 255 255 / 0.05); --dc-border-default: rgb(255 255 255 / 0.09); --dc-border-strong: rgb(255 255 255 / 0.15); /* ── Tables ────────────────────────────────────────────────── */ --dc-table-header-bg: var(--dc-gray-800); --dc-table-row-alt: var(--dc-gray-900); --dc-table-row-hover: var(--dc-gray-800); /* ── Brand (vivid cyan-teal for dark backgrounds) ───────────── */ --dc-brand-primary: var(--dc-brand-primary-light); /* #00E8C4 */ --dc-brand-primary-hover: rgb(0 208 176); /* slightly dimmer on hover */ --dc-brand-primary-soft: rgb(0 232 196 / 0.10); --dc-brand-primary-muted: rgb(0 232 196 / 0.18); }