/* ========================================================================== Little Ayat — Design Tokens (single source of truth) -------------------------------------------------------------------------- Three layers: 1. PRIMITIVES — the raw palette. The ONLY place literal colours live. 2. SEMANTIC — roles (primary, surface, text…). Components use THESE. 3. SCALE — spacing, radii, shadows, type. To restyle the whole site: edit the SEMANTIC layer (or swap primitives). Seasonal / alternate themes: override the SEMANTIC layer under a [data-theme="…"] block (example at the bottom). ========================================================================== */ :root{ /* 1. PRIMITIVES ---------------------------------------------------------- */ --c-cream:#FFF8F0; --c-white:#FFFFFF; --c-purple-100:#F0EAFB; --c-purple-300:#C9B8EC; --c-purple-600:#8B72CE; --c-green-100:#E4F6EF; --c-green-300:#9ADBC5; --c-green-600:#3E9E7E; --c-pink-100:#FFEDF0; --c-pink-300:#FFC2CC; --c-pink-500:#FF8FA0; --c-taupe:#C9B79C; --c-sun:#FFD36B; --c-ink:#4A4360; --c-ink-soft:#7A7291; --c-line:#EDE6DC; --font-heading:'Baloo 2','Chalkboard SE','Comic Sans MS',system-ui,sans-serif; --font-body:'Baloo 2',system-ui,-apple-system,sans-serif; /* 2. SEMANTIC (components reference only these) ------------------------- */ --color-bg:var(--c-cream); --color-surface:var(--c-white); --color-primary:var(--c-purple-600); --color-primary-soft:var(--c-purple-100); --color-accent:var(--c-green-300); --color-accent-strong:var(--c-green-600); --color-highlight:var(--c-sun); --color-cta-from:var(--c-pink-300); --color-cta-to:var(--c-pink-500); --text-strong:var(--c-ink); --text-muted:var(--c-ink-soft); --border:var(--c-line); /* 3. SCALE --------------------------------------------------------------- */ --space-1:6px; --space-2:10px; --space-3:14px; --space-4:18px; --space-5:24px; --space-6:34px; --radius-sm:12px; --radius:18px; --radius-lg:24px; --radius-pill:999px; --shadow:0 12px 34px rgba(139,114,206,.16); --shadow-sm:0 5px 16px rgba(139,114,206,.12); --text-body:16px; --text-sm:13px; --text-lg:20px; --tap:44px; /* minimum touch target */ --page-max:460px; /* mobile-first content column */ } /* -------------------------------------------------------------------------- Alternate theme example — a warmer "festival" look. Add to activate. Only the SEMANTIC layer changes; every component re-themes automatically. -------------------------------------------------------------------------- */ :root[data-theme="festival"]{ --color-primary:var(--c-green-600); --color-primary-soft:var(--c-green-100); --color-accent:var(--c-sun); --color-cta-from:var(--c-sun); --color-cta-to:#F5A623; }