/* ===================================================== */ /* Akoma Design Tokens */ /* Theme system: */ /* or "light" */ /* Default: dark */ /* ===================================================== */ :root { color-scheme: dark; /* =================================================== */ /* Surfaces */ /* =================================================== */ --bg: #101214; --bg-elevated: #14171a; --surface: #171a1e; --surface-2: #1d2227; --border: #2b3137; /* =================================================== */ /* Typography */ /* =================================================== */ --text: #d9dee3; --text-muted: #9aa4ad; --heading: #f7fbff; /* =================================================== */ /* Akoma Brand */ /* =================================================== */ --accent: #24d599; --accent-600: #1fbf86; --accent-700: #169b6c; --accent-800: #10734f; --accent-contrast: #061f18; /* =================================================== */ /* Status */ /* =================================================== */ --success: #24d599; --warning: #e3b062; --danger: #e36b6b; /* =================================================== */ /* Effects */ /* =================================================== */ --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 28px rgba(0, 0, 0, 0.22); --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 48px rgba(0, 0, 0, 0.34); --wiki-glow: color-mix(in srgb, var(--accent) 14%, transparent); --wiki-panel: color-mix(in srgb, var(--surface) 88%, transparent); --wiki-panel-strong: color-mix(in srgb, var(--surface-2) 92%, transparent); --wiki-hairline: rgba(255, 255, 255, 0.035); /* =================================================== */ /* Layout */ /* =================================================== */ --radius: 7px; --radius-sm: 4px; --radius-lg: 10px; --container: 1040px; /* =================================================== */ /* Typography Stacks */ /* =================================================== */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* =================================================== */ /* Spacing */ /* =================================================== */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; } /* ===================================================== */ /* Explicit DARK theme */ /* ===================================================== */ :root[data-theme="dark"] { color-scheme: dark; } /* ===================================================== */ /* LIGHT theme */ /* ===================================================== */ :root[data-theme="light"] { color-scheme: light; --bg: #f7f6f3; --bg-elevated: #fffdfa; --surface: #fffaf3; --surface-2: #faf6ef; --border: #e7e1d7; --text: #2a2a2a; --text-muted: #5d5a54; --heading: #1e1e1e; --accent: #24d599; --accent-600: #1fbf86; --accent-700: #169b6c; --accent-800: #10734f; --accent-contrast: #ffffff; --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.10); } /* ===================================================== */ /* System preference fallback */ /* ===================================================== */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #f7f6f3; --bg-elevated: #fffdfa; --surface: #fffaf3; --surface-2: #faf6ef; --border: #e7e1d7; --text: #2a2a2a; --text-muted: #5d5a54; --heading: #1e1e1e; --accent: #24d599; --accent-600: #1fbf86; --accent-700: #169b6c; --accent-800: #10734f; --accent-contrast: #ffffff; --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.10); } }