:root { /* ═══════════════════════════════════════════ BRAND PALETTE — yeux by qun (2026 update) Five anchors from the updated client brand guidelines (coolors.co/e2e2db-ceccd7-7698b1-7a6174-32292f): Cream #e2e2db hsl( 60, 11%, 87%) — warm light neutral Lavender #ceccd7 hsl(251, 13%, 82%) — soft accent Slate #7698b1 hsl(207, 27%, 58%) — primary brand Mauve #7a6174 hsl(317, 11%, 43%) — secondary accent (NEW) Ink #32292f hsl(327, 10%, 18%) — darkest text / surface Variable names (plum/cream/rose/jade) are kept for back-compat across the existing codebase; --mauve-* is a new scale for the dusty plum accent. ═══════════════════════════════════════════ */ /* ── SLATE (primary) — anchor #7698b1 ── */ --plum-50: hsl(207, 30%, 96%); --plum-100: hsl(207, 27%, 90%); --plum-200: hsl(207, 27%, 80%); --plum-300: hsl(207, 27%, 72%); --plum-400: hsl(207, 27%, 64%); --plum-500: hsl(207, 27%, 58%); /* brand · #7698b1 */ --plum-600: hsl(207, 30%, 44%); --plum-700: hsl(207, 34%, 30%); /* Aliases — slate-* names for cleaner code */ --slate-50: var(--plum-50); --slate-100: var(--plum-100); --slate-200: var(--plum-200); --slate-300: var(--plum-300); --slate-400: var(--plum-400); --slate-500: var(--plum-500); --slate-600: var(--plum-600); --slate-700: var(--plum-700); /* ── LAVENDER (soft accent) — anchor #ceccd7 ── */ --rose-50: hsl(251, 24%, 96%); --rose-100: hsl(251, 20%, 93%); --rose-200: hsl(251, 16%, 88%); --rose-300: hsl(251, 14%, 85%); --rose-400: hsl(251, 13%, 82%); /* brand · #ceccd7 */ --rose-500: hsl(251, 16%, 64%); --rose-600: hsl(251, 22%, 48%); --rose-700: hsl(251, 28%, 32%); --lavender-50: var(--rose-50); --lavender-100: var(--rose-100); --lavender-200: var(--rose-200); --lavender-300: var(--rose-300); --lavender-400: var(--rose-400); --lavender-500: var(--rose-500); --lavender-600: var(--rose-600); --lavender-700: var(--rose-700); /* ── JADE (collapsed to slate, kept for back-compat) ── */ --jade-50: var(--plum-50); --jade-100: var(--plum-100); --jade-200: var(--plum-200); --jade-300: var(--plum-300); --jade-400: var(--plum-400); --jade-500: var(--plum-500); --jade-600: var(--plum-600); --jade-700: var(--plum-700); /* ── CREAM (warm light neutral) — anchor #e2e2db ── */ --cream-0: hsl(60, 16%, 94%); /* near-white, warm */ --cream-50: hsl(60, 11%, 87%); /* brand · #e2e2db */ --cream-100: hsl(60, 10%, 80%); --cream-200: hsl(60, 9%, 72%); --cream-300: hsl(57, 9%, 62%); --cream-400: hsl(54, 8%, 52%); --cream-500: hsl(54, 9%, 42%); --cream-600: hsl(50, 10%, 32%); --cream-700: hsl(45, 12%, 22%); --beige-0: var(--cream-0); --beige-50: var(--cream-50); --beige-100: var(--cream-100); --beige-200: var(--cream-200); --beige-300: var(--cream-300); --beige-400: var(--cream-400); --beige-500: var(--cream-500); --beige-600: var(--cream-600); --beige-700: var(--cream-700); /* ── MAUVE (secondary accent — NEW) — anchor #7a6174 ── */ --mauve-50: hsl(317, 14%, 95%); --mauve-100: hsl(317, 13%, 88%); --mauve-200: hsl(317, 12%, 78%); --mauve-300: hsl(317, 11%, 64%); --mauve-400: hsl(317, 11%, 52%); --mauve-500: hsl(317, 11%, 43%); /* brand · #7a6174 */ --mauve-600: hsl(317, 14%, 33%); --mauve-700: hsl(327, 14%, 23%); /* ── INK (text / dark surface) — anchor #32292f ── */ --ink-500: hsl(327, 10%, 18%); /* brand · #32292f */ --ink-400: hsl(327, 12%, 30%); /* ink-300 calibrated so muted body text passes WCAG AA (≥4.5:1) on cream-50. */ --ink-300: hsl(327, 12%, 40%); --ink-200: hsl(327, 10%, 60%); /* ── MIST (subtle borders) ── */ --mist-200: hsl(251, 10%, 90%); /* ═══════════════════════════════════════════ SEMANTIC MAPPINGS — brand-anchored Every "semantic" color resolves to one of the 5 brand anchors (#e2e2db cream · #ceccd7 lavender · #7698b1 slate · #7a6174 mauve · #32292f ink) or to an alpha-of-anchor for legitimate functional uses (hover, alpha border, alpha veil, gradient, shadow, disabled). Reach for semantic vars below — NOT raw --plum-600 / --ink-400 / --mauve-700 etc — when styling text, headings, CTAs, surfaces. ═══════════════════════════════════════════ */ /* ── SURFACES (backgrounds) ───────────────── */ /* Primary page surface = cream anchor; cards/elevated = pure white. */ --color-bg: var(--cream-50); /* anchor cream #e2e2db */ --color-bg-alt: var(--cream-50); /* anchor cream — same; alias for back-compat */ --color-bg-elevated: #ffffff; /* card surface */ --color-bg-dark: var(--ink-500); /* anchor ink — dark surfaces (footer, hero veil) */ --color-bg-deep: var(--ink-500); /* anchor ink — deepest surfaces */ /* ── TEXT ────────────────────────────────── */ /* Body text = ink anchor. Soft = ink @ 75% (secondary hierarchy ONLY, e.g. meta lines under titles). Muted = ink @ 60% (true micro-copy, timestamps, captions — NOT main body paragraphs). */ --color-text: var(--ink-500); /* anchor ink #32292f */ --color-text-soft: hsla(327, 10%, 18%, 0.75); /* ink @ 75% — secondary */ --color-text-muted: hsla(327, 10%, 18%, 0.6); /* ink @ 60% — micro */ --color-text-on-dark: #ffffff; /* white on dark surfaces */ --color-text-invert: #ffffff; /* alias for back-compat */ /* ── HEADINGS ────────────────────────────── */ /* Default heading = ink anchor. Branded/emphasis heading = slate anchor. Em accents inside titles = slate (the brand "look at me" color). */ --color-heading: var(--ink-500); /* anchor ink */ --color-heading-em: var(--plum-500); /* anchor slate #7698b1 */ /* ── ACCENTS ─────────────────────────────── */ /* Soft accent (tags, hover bg, dividers) = lavender anchor. Hover state on the soft accent = derived (8% darker) — functional only. */ --color-accent: var(--rose-400); /* anchor lavender #ceccd7 */ --color-accent-hover: hsl(251, 14%, 76%); /* lavender darker 6% — hover */ --color-accent-soft: hsla(251, 13%, 82%, 0.35); /* lavender @ 35% — soft fill */ /* ── PRIMARY BRAND (slate) ───────────────── */ --color-primary: var(--plum-500); /* anchor slate */ --color-primary-hover: hsl(207, 27%, 50%); /* slate darker 8% — hover */ --color-primary-soft: hsla(207, 27%, 58%, 0.12); /* slate @ 12% — soft fill */ /* ── SECONDARY BRAND (mauve) ─────────────── */ --color-secondary: var(--mauve-500); /* anchor mauve #7a6174 */ --color-secondary-hover: hsl(317, 12%, 36%); /* mauve darker — hover */ --color-secondary-soft: hsla(317, 11%, 43%, 0.12); /* mauve @ 12% — soft fill */ /* ── CTAs ────────────────────────────────── */ --color-cta-primary: var(--plum-500); /* anchor slate */ --color-cta-primary-hover: hsl(207, 27%, 50%); /* slate darker — hover */ --color-cta-secondary: var(--mauve-500); /* anchor mauve */ --color-cta-secondary-hover: hsl(317, 12%, 36%); /* mauve darker — hover */ /* ── BORDERS ─────────────────────────────── */ /* Subtle = ink @ 10%; strong = ink @ 18%. Both are alpha-of-ink. */ --color-border: hsla(327, 10%, 18%, 0.10); /* ink @ 10% — subtle divider */ --color-border-strong: hsla(327, 10%, 18%, 0.18); /* ink @ 18% — visible divider */ /* ── STATUS (kept; outside brand palette by necessity) ── */ --color-success: hsl(142, 40%, 38%); --color-error: hsl(0, 60%, 48%); /* ═══════════════════════════════════════════ TYPOGRAPHY (unchanged) ═══════════════════════════════════════════ */ --font-display: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif; --font-display-zh: 'Noto Serif SC', 'Cormorant Garamond', serif; --font-body: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif; --font-body-zh: 'Noto Sans SC', 'Inter', system-ui, sans-serif; --text-xs: clamp(0.75rem, 0.7vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.85vw, 0.9375rem); --text-base: clamp(0.9375rem, 0.95vw, 1.0625rem); --text-lg: clamp(1.0625rem, 1.1vw, 1.1875rem); --text-xl: clamp(1.1875rem, 1.3vw, 1.375rem); --text-2xl: clamp(1.5rem, 1.8vw, 1.875rem); --text-3xl: clamp(1.875rem, 2.5vw, 2.5rem); --text-4xl: clamp(2.25rem, 3.4vw, 3.25rem); --text-5xl: clamp(2.75rem, 4.5vw, 4.25rem); --text-6xl: clamp(3.25rem, 6.2vw, 5.75rem); --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.75; --tracking-tightest: -0.035em; --tracking-tight: -0.018em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.1em; --tracking-widest: 0.24em; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ═══════════════════════════════════════════ SPACING (8px grid — unchanged) ═══════════════════════════════════════════ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --section-padding: clamp(4rem, 9vw, 8.5rem); /* ═══════════════════════════════════════════ LAYOUT (unchanged) ═══════════════════════════════════════════ */ --container-sm: 640px; --container-md: 820px; --container-lg: 1080px; --container-xl: 1240px; --container-2xl: 1440px; --container-padding: clamp(1.25rem, 4vw, 2.5rem); /* ═══════════════════════════════════════════ BORDERS & RADIUS (unchanged) ═══════════════════════════════════════════ */ --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-3xl: 2rem; --radius-full: 9999px; /* ═══════════════════════════════════════════ SHADOWS (slate-tinted now) ═══════════════════════════════════════════ */ --shadow-xs: 0 1px 2px hsla(208, 22%, 18%, 0.04); --shadow-sm: 0 1px 3px hsla(208, 22%, 18%, 0.07), 0 1px 2px hsla(208, 22%, 18%, 0.05); --shadow-md: 0 6px 16px hsla(208, 22%, 18%, 0.08), 0 2px 4px hsla(208, 22%, 18%, 0.05); --shadow-lg: 0 14px 32px hsla(208, 22%, 18%, 0.1), 0 4px 8px hsla(208, 22%, 18%, 0.05); --shadow-xl: 0 28px 60px hsla(208, 22%, 18%, 0.15), 0 10px 20px hsla(208, 22%, 18%, 0.06); --shadow-glow-rose: 0 0 0 4px hsla(252, 18%, 70%, 0.25); --shadow-glow-plum: 0 0 0 4px hsla(208, 22%, 53%, 0.18); /* ═══════════════════════════════════════════ TRANSITIONS (unchanged) ═══════════════════════════════════════════ */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 160ms; --duration-normal: 280ms; --duration-slow: 480ms; --duration-slower: 800ms; /* Z-INDEX */ --z-default: 0; --z-raised: 1; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 500; --z-max: 9999; }