/* ===================================================== */ /* Akoma Design Tokens */ /* Theme system: */ /* or "light" */ /* Default: dark */ /* ===================================================== */ :root { color-scheme: dark; /* Surfaces */ --bg: #121212; --bg-elevated: #181818; --surface: #1c1c1c; --border: #2a2a2a; /* Typography */ --text: #e6e2dc; --text-muted: #b8b3ab; --heading: #f5f1e9; /* Brand */ --accent: #c8a47e; --accent-600: #b89067; --accent-700: #a67f55; --accent-contrast: #1a1208; /* Status */ --success: #71c291; --warning: #e3b062; --danger: #e36b6b; /* Effects */ --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); --shadow-1: 0 1px 3px rgba(0,0,0,0.4); --shadow-2: 0 6px 20px rgba(0,0,0,0.35); /* Layout */ --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; --container: 1100px; /* 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 scale */ --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; --border: #e7e1d7; --text: #2a2a2a; --text-muted: #5d5a54; --heading: #1e1e1e; --accent: #a77444; --accent-600: #98683a; --accent-700: #83582f; --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 */ /* (used when user hasn't chosen theme yet) */ /* ===================================================== */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #f7f6f3; --bg-elevated: #fffdfa; --surface: #fffaf3; --border: #e7e1d7; --text: #2a2a2a; --text-muted: #5d5a54; --heading: #1e1e1e; --accent: #a77444; --accent-600: #98683a; --accent-700: #83582f; --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); } }