/* Exaflair design tokens — the single source of truth for brand values in CSS.
Source: brand kit (Feb 2026) + brand/BRAND.md. Mirrors brand/tokens.json.
Load from a design with:
(that relative path also resolves correctly when served from public//).
Scheme: light is the default on :root. Dark is applied by
, or by the OS preference when no data-theme is set.
Setting data-theme="light" pins light regardless of the OS. */
:root {
color-scheme: light;
/* --- Brand palette (raw, never change per theme) --- */
--color-tangerine: #F08000; /* primary */
--color-yellow-orange: #FFAA33; /* secondary */
--color-white: #FFFFFF;
--color-almost-black: #111111;
--color-burnt-orange: #CA5C2A; /* gradient end; sampled from the kit */
--color-off-white: #F1F1F1; /* light-mode ground; sampled from the kit */
/* Supporting greys (derived from Almost Black; not in the kit, used for UI) */
--color-grey-100: #E6E6E6;
--color-grey-200: #CFCFCF;
--color-grey-400: #9A9A9A;
--color-grey-500: #7A7A7A;
--color-grey-700: #3A3A3A;
--color-grey-800: #262626;
--color-grey-900: #1A1A1A;
/* --- Gradient --- */
--gradient-brand: linear-gradient(180deg, var(--color-tangerine) 0%, var(--color-burnt-orange) 100%);
--gradient-brand-horizontal: linear-gradient(90deg, var(--color-tangerine) 0%, var(--color-burnt-orange) 100%);
/* --- Semantic colors (these flip in dark mode) --- */
--bg: var(--color-off-white);
--surface: var(--color-white);
--surface-2: #E9E9E9;
--text: var(--color-almost-black);
--text-muted: #5C5C5C;
--border: #DADADA;
--accent: var(--color-tangerine);
--accent-soft: #FDEBD6;
--on-accent: var(--color-white);
/* --- Typography --- */
--font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--text-xs: 0.75rem; /* 12 */
--text-sm: 0.875rem; /* 14 */
--text-base: 1rem; /* 16 */
--text-md: 1.125rem; /* 18 */
--text-lg: 1.375rem; /* 22 */
--text-xl: 1.75rem; /* 28 */
--text-2xl: 2.25rem; /* 36 */
--text-3xl: 3rem; /* 48 */
--text-4xl: 4rem; /* 64 */
--text-display: clamp(3rem, 8vw, 7rem);
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-normal: 1.55;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.08em;
--tracking-wordmark: 0.34em; /* EXAFLAIR wordmark spacing, matched to the lockups */
/* --- Spacing (4px base) --- */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-6: 1.5rem; /* 24 */
--space-8: 2rem; /* 32 */
--space-12: 3rem; /* 48 */
--space-16: 4rem; /* 64 */
--space-24: 6rem; /* 96 */
--space-32: 8rem; /* 128 */
/* --- Radii --- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 28px;
--radius-full: 9999px;
/* --- Motion --- */
--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
--duration-fast: 120ms;
--duration-base: 240ms;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--bg: var(--color-almost-black);
--surface: var(--color-grey-900);
--surface-2: var(--color-grey-800);
--text: var(--color-off-white);
--text-muted: #A3A3A3;
--border: #2E2E2E;
--accent: var(--color-tangerine);
--accent-soft: #33200B;
--on-accent: var(--color-white);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg: var(--color-almost-black);
--surface: var(--color-grey-900);
--surface-2: var(--color-grey-800);
--text: var(--color-off-white);
--text-muted: #A3A3A3;
--border: #2E2E2E;
--accent: var(--color-tangerine);
--accent-soft: #33200B;
--on-accent: var(--color-white);
}