/* ========================================================================== Design Tokens — Crown Pageants Fresh palette derived from the approved mockup. Light mode is default; [data-theme="dark"] on overrides. ========================================================================== */ :root { /* ---- Brand (fixed across modes) ---- */ --brand-pink-50: #fdf1f6; --brand-pink-100: #fbdcea; --brand-pink-200: #f7b3d2; --brand-pink-300: #f17fb2; --brand-pink-400: #ea4a90; --brand-pink-500: #e01c78; /* primary brand color */ --brand-pink-600: #c11267; --brand-pink-700: #9d0d54; --brand-pink-800: #7a0a42; --brand-pink-900: #4d0629; --brand-gold-400: #d9a441; /* secondary accent, used sparingly (crown/tiara motif) */ --brand-gold-500: #c28b28; /* ---- Semantic tokens: LIGHT MODE (default) ---- */ --color-bg: #ffffff; --color-bg-alt: #fbf6f8; /* soft pink-tinted section alt bg */ --color-surface: #ffffff; /* cards */ --color-surface-alt: #fdf1f6; --color-border: #ecdde4; --color-border-strong: #e0c3d2; --color-text: #201017; --color-text-muted: #6b5560; --color-text-inverse: #ffffff; --color-brand: var(--brand-pink-500); --color-brand-hover: var(--brand-pink-600); --color-brand-contrast:#ffffff; --color-link: var(--brand-pink-600); --color-focus-ring: #1a63d6; /* Fixed-dark structural sections (hero/footer) — same in both modes by design intent, but tokenized separately so they can be themed if requirements change. */ --color-inverse-bg: #17090f; --color-inverse-surface: #241019; --color-inverse-border: #3a1a26; --color-inverse-text: #ffffff; --color-inverse-text-muted: #d9b8c6; /* ---- Elevation ---- */ --shadow-sm: 0 1px 2px rgba(32, 16, 23, 0.06); --shadow-md: 0 6px 20px rgba(32, 16, 23, 0.10); --shadow-lg: 0 20px 45px rgba(32, 16, 23, 0.16); /* ---- Radius ---- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* ---- Spacing scale ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --space-12: 5rem; --space-16: 7rem; /* ---- Section rhythm ---- */ --section-padding-y: clamp(3.5rem, 6vw, 7rem); --container-max: 1320px; --container-pad: clamp(1.25rem, 4vw, 2.5rem); /* ---- Typography ---- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fs-h1: clamp(2.25rem, 4.5vw, 3.75rem); --fs-h2: clamp(1.75rem, 3vw, 2.5rem); --fs-h3: clamp(1.25rem, 2vw, 1.5rem); --fs-eyebrow: 0.8125rem; --fs-body: 1rem; --fs-small: 0.875rem; --lh-tight: 1.15; --lh-heading: 1.25; --lh-body: 1.65; /* ---- Motion ---- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; } /* ---- Semantic tokens: DARK MODE ---- */ [data-theme="dark"] { --color-bg: #120a0e; --color-bg-alt: #1a0f14; --color-surface: #1f1319; --color-surface-alt: #26161e; --color-border: #3a2029; --color-border-strong: #4a2733; --color-text: #f7edf1; --color-text-muted: #c7a9b4; --color-text-inverse: #201017; --color-brand: var(--brand-pink-400); --color-brand-hover: var(--brand-pink-300); --color-brand-contrast:#1a0f14; --color-link: var(--brand-pink-300); --color-focus-ring: #7ab2ff; --color-inverse-bg: #0d0609; --color-inverse-surface: #17090f; --color-inverse-border: #2b131b; --color-inverse-text: #ffffff; --color-inverse-text-muted: #d9b8c6; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.55); } /* Respect OS preference only when no explicit user choice has been stored. The inline no-flash script in header.php sets data-theme before paint; this block is a CSS-only fallback for no-JS environments. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; }