/* DGbot Docs Portal — Design Tokens */ /* Accent: Mint/Teal default. Switch via .accent-violet / .accent-orange / .accent-indigo on */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); /* ── Accent Palettes ────────────────────────────────────────────── */ :root { /* Burnt Orange — DGbot brand accent */ --ac: #111118; --ac-h: #000000; --ac-s: #f4f4f5; --ac-b: #d4d4d8; --ac-t: #111118; } .accent-violet { --ac: #7357ff; --ac-h: #5c42e6; --ac-s: #ede9ff; --ac-b: #c8bcff; --ac-t: #5c42e6; } .accent-orange { --ac: #ff7a1a; --ac-h: #e8650a; --ac-s: #fff7ed; --ac-b: #fed7aa; --ac-t: #c45208; } .accent-indigo { --ac: #6366f1; --ac-h: #4f46e5; --ac-s: #eef2ff; --ac-b: #c7d2fe; --ac-t: #4338ca; } /* ── Light Mode (default) ───────────────────────────────────────── */ :root { /* Surfaces */ --s-base: #ffffff; --s-raised: #ffffff; --s-overlay: #f4f4f5; --s-sidebar: #ffffff; --s-code: #0f0f16; /* Borders */ --b-subtle: #f0f0f0; --b-default: #e4e4e7; --b-strong: #d4d4d8; /* Text */ --t-primary: #111827; --t-secondary: #374151; --t-tertiary: #6b7280; --t-inverse: #ffffff; --t-code: #f0eef8; /* Semantic */ --success: #16a34a; --success-s: #f0fdf4; --success-b: #bbf7d0; --success-t: #15803d; --warning: #d97706; --warning-s: #fffbeb; --warning-b: #fde68a; --warning-t: #b45309; --danger: #dc2626; --danger-s: #fef2f2; --danger-b: #fecaca; --danger-t: #b91c1c; --info: #2563eb; --info-s: #eff6ff; --info-b: #bfdbfe; --info-t: #1d4ed8; --tip: #7357ff; --tip-s: #ede9ff; --tip-b: #c8bcff; --tip-t: #5c42e6; /* Typography */ --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --f-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* Layout */ --nav-h: 62px; --sidebar-w: 280px; --toc-w: 220px; --content-max: 800px; /* Radii */ --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; /* Shadows */ --sh-xs: 0 1px 2px rgba(0,0,0,0.04); --sh-sm: 0 1px 4px rgba(0,0,0,0.07); --sh-md: 0 4px 16px rgba(0,0,0,0.09); --sh-lg: 0 12px 40px rgba(0,0,0,0.13); /* Code block */ --code-bg: #1c1917; --code-fg: #f5f0eb; --topbar-border: rgba(0,0,0,0.07); } /* ── Dark Mode ──────────────────────────────────────────────────── */ [data-theme="dark"] { --s-base: #0f0f16; --s-raised: #17171f; --s-overlay: #1e1e28; --s-sidebar: #0a0a10; --s-code: #08080c; --b-subtle: rgba(255,255,255,0.07); --b-default: rgba(255,255,255,0.11); --b-strong: rgba(255,255,255,0.22); --t-primary: #f4f2ff; --t-secondary: #c8c5d8; --t-tertiary: #8a87a0; --t-code: #f0eef8; --success-s: rgba(22,163,74,0.13); --success-b: rgba(22,163,74,0.28); --warning-s: rgba(217,119,6,0.13); --warning-b: rgba(217,119,6,0.28); --danger-s: rgba(220,38,38,0.13); --danger-b: rgba(220,38,38,0.28); --info-s: rgba(37,99,235,0.13); --info-b: rgba(37,99,235,0.28); --tip-s: rgba(115,87,255,0.13); --tip-b: rgba(115,87,255,0.28); --ac-s: rgba(234,96,7,0.13); --ac-b: rgba(234,96,7,0.28); --topbar-bg: rgba(10,10,16,0.92); --topbar-border: rgba(255,255,255,0.07); } [data-theme="dark"].accent-violet { --ac-s: rgba(115,87,255,0.12); --ac-b: rgba(115,87,255,0.25); } [data-theme="dark"].accent-orange { --ac-s: rgba(255,122,26,0.12); --ac-b: rgba(255,122,26,0.25); } [data-theme="dark"].accent-indigo { --ac-s: rgba(99,102,241,0.12); --ac-b: rgba(99,102,241,0.25); }