/* ============================================================ ABBY BERNARD — DESIGN TOKENS "Shine like the star that you are." Night sky + golden star. Warm, radiant, professional. Contrast ratios annotated as (x.xx:1 vs ) — all pairings meet WCAG AA (≥4.5:1 text, ≥3:1 large text/UI). Most are AAA. Dark theme is the DEFAULT (:root). Add class="theme-light" on or any section to switch to the light "dawn" theme. ============================================================ */ :root { /* ---------- RAW SCALES ---------- */ /* Midnight (night sky) */ --midnight-950: #070A1E; /* deepest sky — footers, vignettes */ --midnight-900: #0A0E27; /* THE brand background (kept from original identity) */ --midnight-800: #111737; /* surface */ --midnight-700: #1A2149; /* raised surface / card */ --midnight-600: #27305C; /* hairline borders on dark */ --midnight-500: #39437A; /* strong borders / disabled fills */ /* Star gold */ --gold-200: #FFF0C4; /* faint twinkle tint */ --gold-300: #FFE49A; /* bright gold — links on dark (15.21:1 vs midnight-900) */ --gold-400: #FFD75A; /* PRIMARY star gold (13.68:1 vs midnight-900) */ --gold-500: #EDBE37; /* pressed / deep gold */ --gold-600: #946D00; /* gold as LARGE text on light (4.54:1 vs cream-50) */ --gold-700: #7E5C0F; /* gold as text on light (5.90:1 vs cream-50, 5.25:1 vs blush) */ /* Warm pink (nudged warmer than the old #FF8FB8 to sit with the peach #FFBFAE headshot backgrounds) */ --pink-200: #FFD3DE; --pink-300: #FFB5C9; /* 11.49:1 vs midnight-900 */ --pink-400: #FF8FAC; /* PRIMARY pink (8.84:1 vs midnight-900) */ --pink-600: #B73363; /* rose — pink as text/links on light (5.51:1 vs cream-50) */ --pink-700: #9C2A55; /* rose pressed */ /* Twilight lavender — tertiary, decorative, dark theme only (constellation lines, nebula gradients; flatters the lavender-top photos) */ --lavender-300: #C3B6F0; /* 10.19:1 vs midnight-900 */ --lavender-400: #B9A9EC; /* Dawn neutrals (light theme, tied to the peach photo backgrounds) */ --cream-50: #FFFAF3; /* light bg */ --cream-100: #FFF3EA; --blush-100: #FFE9E1; /* light surface — harmonizes with #FFBFAE photo bg */ --blush-200: #F2D7CB; /* hairline borders on light (decorative) */ /* Ink (text on light) */ --ink-900: #14193B; /* 16.41:1 vs cream-50, 14.60:1 vs blush-100 */ --ink-600: #4C5473; /* 7.16:1 vs cream-50, 6.37:1 vs blush-100 */ --ink-400: #6B7292; /* subtle/large-only on light (4.54:1 vs cream-50) */ --white-warm: #FFF7EA; /* text on dark (17.86:1 vs midnight-900) */ /* ---------- SEMANTIC — DARK (default) ---------- */ --bg: var(--midnight-900); --bg-deep: var(--midnight-950); --surface: var(--midnight-800); /* text 16.43:1 */ --surface-raised: var(--midnight-700); /* text 14.54:1 */ --border: var(--midnight-600); --border-strong: var(--midnight-500); --text: var(--white-warm); /* 17.86:1 vs bg */ --text-muted: #B7BEDD; /* 10.33:1 vs bg, 8.41:1 vs card */ --text-subtle: #8E97C4; /* 6.67:1 vs bg — still AA normal text */ --accent: var(--gold-400); /* stars, highlights — 13.68:1 vs bg */ --accent-bright: var(--gold-300); --accent-text: var(--gold-400); /* gold used AS text on current bg */ --accent-2: var(--pink-400); /* 8.84:1 vs bg */ --accent-2-text: var(--pink-400); --accent-3: var(--lavender-300); /* decorative only */ --link: var(--gold-300); /* 15.21:1 vs bg */ --link-hover: var(--gold-400); --btn-primary-bg: var(--gold-400); --btn-primary-bg-hover: var(--gold-300); --btn-primary-text: var(--ink-900); /* 12.27:1 on gold, 13.64:1 on hover */ --btn-pink-bg: var(--pink-400); --btn-pink-text: var(--ink-900); /* 7.93:1 */ --focus-ring: var(--gold-300); --selection-bg: var(--gold-400); --selection-text: var(--ink-900); /* ---------- GRADIENTS & PHOTO TREATMENTS ---------- */ --gradient-nebula: linear-gradient(180deg, #070A1E 0%, #0A0E27 45%, #171E45 100%); --gradient-spotlight: radial-gradient(ellipse 60% 50% at 50% 38%, rgba(255,215,90,.14), transparent 70%); --gradient-dawn: linear-gradient(180deg, #FFFAF3 0%, #FFE9E1 100%); --gradient-photo-protect: linear-gradient(180deg, rgba(10,14,39,0) 40%, rgba(10,14,39,.88) 82%, rgba(7,10,30,.96) 100%); --duotone-midnight: #0A0E27; /* duotone shadow end (see .duotone in base.css) */ --duotone-gold: #FFD75A; /* duotone light end */ /* ---------- TYPE ---------- */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Figtree", "Helvetica Neue", Arial, sans-serif; --font-script: "Caveat", "Comic Sans MS", cursive; /* tagline ONLY */ /* Fluid scale (min @360px viewport → max @1440px) */ --text-hero: clamp(3rem, 1.96rem + 4.6vw, 6rem); /* 48→96 */ --text-display: clamp(2.25rem, 1.69rem + 2.5vw, 3.9rem); /* 36→62 */ --text-title: clamp(1.625rem, 1.4rem + 1vw, 2.25rem); /* 26→36 */ --text-heading: clamp(1.25rem, 1.19rem + 0.28vw, 1.4375rem); /* 20→23 */ --text-body-lg: clamp(1.0625rem, 1.04rem + 0.12vw, 1.1875rem); /* 17→19 */ --text-body: 1rem; /* 16 */ --text-small: 0.875rem; /* 14 */ --text-caption: 0.8125rem; /* 13 */ --text-tagline: clamp(1.5rem, 1.33rem + 0.75vw, 2rem); /* Caveat 24→32 */ --leading-tight: 1.04; --leading-snug: 1.15; --leading-heading: 1.28; --leading-body: 1.6; --tracking-display: -0.015em; --tracking-caps: 0.14em; /* uppercase kickers */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- SPACE (4px base) ---------- */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --space-section: clamp(64px, 4rem + 4vw, 128px); --container: 1200px; --container-pad: clamp(20px, 4vw, 48px); /* ---------- RADII ---------- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 36px; --radius-pill: 999px; --radius-arch: 999px 999px 28px 28px; /* signature "stage-door" photo arch */ /* ---------- SHADOWS & GLOWS ---------- */ --shadow-card: 0 12px 32px rgba(4, 6, 20, 0.45); --shadow-card-light: 0 10px 28px rgba(20, 25, 59, 0.10); --glow-gold: 0 0 20px rgba(255, 215, 90, 0.38), 0 0 64px rgba(255, 215, 90, 0.14); --glow-gold-soft: 0 0 44px rgba(255, 215, 90, 0.22); --glow-pink: 0 0 20px rgba(255, 143, 172, 0.34), 0 0 64px rgba(255, 143, 172, 0.12); --glow-text: 0 0 24px rgba(255, 228, 154, 0.45); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-quick: 160ms; --duration-gentle: 320ms; /* ---------- ICON (star glyph as data-URI mask; color via background) ---------- */ --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C53.6 29.6 70.4 46.4 94 50C70.4 53.6 53.6 70.4 50 100C46.4 70.4 29.6 53.6 6 50C29.6 46.4 46.4 29.6 50 0Z'/%3E%3C/svg%3E"); } /* ---------- LIGHT "DAWN" THEME ---------- */ .theme-light { --bg: var(--cream-50); --bg-deep: var(--cream-100); --surface: var(--blush-100); /* ink 14.60:1 */ --surface-raised: #FFFFFF; --border: var(--blush-200); --border-strong: #D9B7A6; --text: var(--ink-900); /* 16.41:1 vs bg */ --text-muted: var(--ink-600); /* 7.16:1 vs bg, 6.37:1 vs blush */ --text-subtle: var(--ink-400); /* 4.54:1 — large text / UI only */ --accent: var(--gold-400); /* fills only on light, never text */ --accent-bright: var(--gold-300); --accent-text: var(--gold-700); /* 5.90:1 vs bg */ --accent-2: var(--pink-400); --accent-2-text: var(--pink-600); /* 5.51:1 vs bg */ --accent-3: var(--pink-300); --link: var(--pink-600); /* 5.51:1 */ --link-hover: var(--pink-700); --focus-ring: var(--pink-600); --shadow-card: var(--shadow-card-light); --glow-gold: 0 0 0 6px rgba(255, 215, 90, 0.35); --gradient-spotlight: radial-gradient(ellipse 60% 50% at 50% 38%, rgba(255, 215, 90, 0.20), transparent 70%); }