/* * variables.css — Design tokens * Tribu Bamiléké — tribubamileke.org * Light theme (default) + dark theme via [data-theme="dark"] */ :root { /* Colors — light theme */ --color-primary: #1a4d8f; /* Indigo blue — Bamileke masquerade cloth, royalty */ --color-primary-dark: #0d2f5c; --color-secondary: #c9a227; /* Gold — beadwork, royal regalia */ --color-secondary-light: #e8c84a; --color-accent: #b83a26; /* Terracotta red — earth, pottery, ritual ochre */ --color-bg: #faf8f4; --color-bg-alt: #f0ece4; --color-text: #2c2418; --color-text-light: #6b5d4f; --color-border: #d6cec0; --color-white: #ffffff; /* Shadows */ --shadow-sm: 0 2px 4px rgba(44, 36, 24, 0.08); --shadow-md: 0 4px 12px rgba(44, 36, 24, 0.12); --shadow-lg: 0 8px 24px rgba(44, 36, 24, 0.16); /* Typography */ --font-heading: "Noto Serif", georgia, serif; --font-body: "Noto Sans", system-ui, -apple-system, sans-serif; --font-lang: "Noto Sans", "Courier New", monospace; /* Bamileke phonetic text */ /* Font sizes (fluid-ish scale) */ --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 2rem; --space-xl: 3rem; /* Layout */ --container-max: 72rem; --header-height: 4.25rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-pill: 999px; /* Motion */ --transition-fast: 150ms ease; --transition-base: 250ms ease; } /* * Dark theme — deep indigo-browns and muted golds, not pure black. * Applied via , persisted in localStorage, * respects prefers-color-scheme on first visit (see main.js). */ [data-theme="dark"] { --color-primary: #6f9fd8; --color-primary-dark: #9dbfe8; --color-secondary: #d8b84a; --color-secondary-light: #e8c84a; --color-accent: #d96a55; --color-bg: #1a150f; --color-bg-alt: #262019; --color-text: #ece5d8; --color-text-light: #b3a68f; --color-border: #453a2c; --color-white: #262019; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); }