/* ============================================================ Lalaluxe — Central Color Configuration ============================================================ One file to rule every hue. Change a value here and it propagates across the entire UI. Palette: "Crowned in Balance" — Dusty rose canvas, jet black ink, cognac warmth, champagne gold highlights, burnt sienna skin. ============================================================ */ :root { /* ---- Canvas & background ---- */ --cream: #e5aab5; /* Soft Rose Background — main app background (mockup pink). Duplicated (CSS vars can't reach meta tags) in booking.html + admin.html — keep all three in sync */ --wash-1: #e0b0c0; /* backdrop wash pinks — .stage / .app::before gradients */ --wash-2: #d8a0b0; --wash-3: #d0a0b0; --wash-4: #c890a0; --tray-fade: #C496A5; /* picks-tray bottom fade hue (alpha via color-mix at use site) */ --blush: #F4D0CD; /* Blush Pink — chip backgrounds, soft fills */ --bubblegum: #E8B0B0; /* muted warm pink — secondary fills */ --pink-soft: #F8E0DC; /* very light blush — hover borders */ /* ---- Accent & action ---- */ --pink-pop: #B03F23; /* Clay Red — bold accent, badges, ornaments */ --cherry: #B0601F; /* Cognac Leather — primary warm action, selection */ --cognac: color-mix(in srgb, #a8602a 85%, var(--wine-soft)); /* Cognac (mockup, deepened so white CTA text clears 4.5:1) — hero CTA, wordmark accent, sparkle */ --tagline-ink: var(--wine-soft); /* hero tagline — deep umber (5.1:1 on --cream) */ --cherry-ink: color-mix(in srgb, var(--cherry) 60%, var(--ink)); /* readable cognac — small money/policy text (4.83:1 on cream, 8.57:1 on paper) */ --pop-ink: color-mix(in srgb, var(--pink-pop) 60%, var(--ink)); /* readable clay red — error text (5.6:1 on cream) */ --scrim-ink: #1A0505; /* consent-modal scrim + card-shadow ink (alphas via color-mix at use site) */ --modal-edge: #5A3232; /* consent-modal hairline edge hue (alpha via color-mix at use site) */ /* ---- Dark & ink family ---- */ --wine: var(--ink); /* Jet Black — lightbox scrim */ --wine-soft: #6C3216; /* Deep Umber — secondary text, captions */ --ink: #020202; /* Jet Black — body text */ --accent-black: #242322; /* Soft Charcoal — dark card gradients, depth */ /* ---- Skin tone ---- */ --skin: #C27638; /* Burnt Sienna — hand/foot illustrations */ --skin-deep: var(--wine-soft); /* Deep Umber — skin gradients, shadows */ /* ---- Gold & metallic ---- */ --gold: #D6B998; /* Champagne Gold — dots, decorative highlights */ /* ---- Editorial accent colors ---- */ --accent-green: #7C794B; /* Olive Detail — nail art accent, muted contrast */ --accent-cream: var(--white); /* Ivory Cream — french tip, light nail art */ --accent-slate: #5A5E72; /* Dusty Blue-Gray — tiny cool accent, marble */ /* ---- Finish swatches (single source: booking .mini-nail + admin .fin-swatch — the fr-classic ::after tip-band GEOMETRY is mirrored in both stylesheets (booking.css .mini-nail.fr-classic::after == admin.css .fin-swatch.fr-classic::after); edit those in lockstep) ---- */ --rose-mid: #E49EB7; /* rose mid-tone — solid swatch gradient end */ --linen: #E8E0D4; /* warm linen — french base gradient end */ --swatch-solid: linear-gradient(180deg, var(--blush), var(--rose-mid)); --swatch-french: linear-gradient(180deg, var(--accent-cream), var(--linen)); --swatch-tip: var(--white); /* french tip band */ --swatch-tip-edge: color-mix(in srgb, var(--cherry) 25%, transparent); /* tip underline */ --swatch-ombre: linear-gradient(180deg, var(--white) 0%, var(--blush) 60%, var(--cherry) 100%); --swatch-marble: radial-gradient(circle at 30% 20%, var(--white) 0%, transparent 18%), radial-gradient(circle at 70% 60%, var(--blush) 0%, transparent 28%), radial-gradient(circle at 50% 80%, var(--accent-slate) 0%, transparent 30%), linear-gradient(135deg, var(--white) 0%, var(--gold) 60%, var(--accent-slate) 100%); /* ---- Light & paper ---- */ --white: #F6F4EE; /* Ivory Cream — text on dark, highlights */ --paper: var(--white); /* Ivory Cream — card surfaces (editorial shift) */ --card-sel: var(--white); /* Ivory Cream — selected-card surface */ --card-sel-2: var(--blush); /* Blush Pink — selected-card deeper tone */ /* ---- Lines & borders (ink at 10% / 18%) ---- */ --line: color-mix(in srgb, var(--ink) 10%, transparent); --line-strong: color-mix(in srgb, var(--ink) 18%, transparent); /* ---- Dark card gradients ---- */ --dark-card-1: var(--ink); /* Jet Black — dark card gradient start */ --dark-card-2: var(--accent-black); /* Soft Charcoal — dark card gradient end */ --dark-sel-1: #341507; /* Espresso Brown — dark card selected start */ --dark-sel-2: #4A2010; /* derived espresso — dark card selected end */ --espresso: #341507; /* stable Espresso Brown — "dark text on gold" + dark surfaces; identical in both themes (do NOT alias a theme-flipped token) */ /* ---- Typography ---- */ /* --wordmark intentionally aliases --display: the wordmark is Playfair "Variant A" (ink "Lala" + gold-italic "luxe" span), distinguished by markup + the gold gradient, NOT a separate family. Don't "fix" this to a script face. (brand-plan §1/§4) */ --wordmark: "Playfair Display", "Bodoni 72", Didot, serif; /* the "Lalaluxe" brand name only */ --display: "Playfair Display", "Bodoni 72", Didot, serif; --script: "Pinyon Script", "Snell Roundhand", cursive; /* accent flourish only — never body, never the wordmark (brand-plan §4) */ /* Lora removed (brand-plan §4): italic accents now render Playfair italic. Every call site pairs this with font-style:italic, so the alias swap needs no per-site edits. */ --italic: "Playfair Display", "Bodoni 72", Didot, serif; --sans: "Outfit", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* ---- Metallic accents (gradients + readable gold shades) ---- */ --gold-deep: #8A6324; /* readable deep gold — eyebrows, section heads */ /* UNUSED in booking.css — reserved by owner-gated intro-9 (metallic wordmark); do not delete (see ux-review-log.md). --gold-light is the standalone metallic highlight. */ --gold-light: #EBC97E; --grad-gold: linear-gradient(160deg, #F3D89A 0%, #E7C275 22%, #C79A4B 55%, #9A6B2A 100%); --grad-gold-h: linear-gradient(90deg, #E9C77E 0%, #C79A4B 50%, #9A6B2A 100%); --grad-bronze: linear-gradient(180deg, #B27F38 0%, #8A5A22 52%, #5E3A14 100%); /* ---- Elevation + motion ---- */ --cta-shadow-ink: #5E2E0E; /* hero CTA drop-shadow hue (alphas via color-mix at use site) */ --bar-shadow-ink: #2A0815; /* botbar CTA drop-shadow ink (alphas via color-mix at use site) */ --cta-sheen: #FFECCD; /* hero CTA sheen-sweep hue */ --shadow-warm: #461E10; /* Recent Work frame/chevron shadow hue */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ============================================================ ADMIN — consumes the SAME "Crowned in Balance" site palette ------------------------------------------------------------ The admin console now shares the booking page's exact colors. There is NO separate admin palette: every --a-* / --st-* color token but --a-onink resolves to a brand value defined above (or a tint derived from one via color-mix), so changing a brand hue updates both the booking page and the studio console in one place. ============================================================ */ /* surfaces — dusty-rose canvas, ivory-cream cards, blush wells */ --a-bg: var(--cream); /* app background — dusty rose */ --a-surface: var(--paper); /* cards / panels — ivory cream */ --a-surface-2: var(--pink-soft); /* subtle inset / striped rows — soft blush */ --a-sunken: var(--blush); /* wells, track backgrounds — blush */ /* ink scale — jet black + warm umber tints */ --a-ink: var(--ink); /* primary text — jet black */ --a-ink-2: var(--wine-soft); /* secondary text — deep umber */ --a-ink-3: color-mix(in srgb, var(--wine-soft) 66%, var(--cream)); /* tertiary / captions */ --a-ink-4: color-mix(in srgb, var(--wine-soft) 42%, var(--cream)); /* placeholder / disabled */ /* borders — brand hairlines */ --a-line: var(--line); /* hairline borders */ --a-line-2: var(--line-strong); /* stronger dividers */ --a-focus: color-mix(in srgb, var(--cherry) 35%, transparent); /* focus ring — cognac at 35% */ /* accents — cognac actions + champagne gold highlights */ --a-accent: var(--cherry); /* cognac — primary action & selection */ --a-accent-ink: color-mix(in srgb, var(--cherry) 80%, var(--ink)); /* deep cognac — interactive emphasis, distinct from umber text */ --a-accent-wash: color-mix(in srgb, var(--cherry) 12%, var(--paper)); /* tint behind selected things */ --a-gold: var(--gold-deep); /* readable gold for tiny highlights */ /* on-dark shell ink + overlays (admin chrome) */ --a-onink: #EDE7DF; /* warm ivory text on the jet-black shell — the ONE hand-tuned admin hue (no brand derivation; dE76 4.65 from --white, 3.28 from --linen — deliberately warmer than --white so it doesn't glare on #020202) */ --a-onink-2: color-mix(in srgb, var(--a-onink) 62%, transparent); /* dimmed nav labels */ --a-onink-3: color-mix(in srgb, var(--a-onink) 55%, transparent); /* dimmed tab labels */ --a-accent-glow: color-mix(in srgb, var(--cherry) 70%, transparent); /* primary-button glow */ --a-overlay: color-mix(in srgb, var(--accent-black) 50%, transparent); /* modal scrim */ --a-overlay-strong: color-mix(in srgb, var(--accent-black) 82%, transparent); /* chips over photos */ /* status hues — drawn from the site's editorial accents, ink-darkened so 11px badge text clears 4.5:1 on its own tinted -bg (bgs mix the base hue) NOTE: the warm -bg tints intentionally converge near --paper (pending/done/ noshow/cancel pairwise dE76 ~2.7-3.4; slate booked-bg sits dE ~4.5-7.3 from them) — badge distinction is carried by the --st-* text inks (and chip border-colors), not the bgs. Do not "consolidate" the bgs: each color-mix self-tracks its base hue, so a shared literal would break palette propagation. (--linen coincidentally lands sub-JND of --a-accent-wash — coincidence, not a merge candidate.) */ --st-booked: var(--accent-slate); /* dusty blue-gray */ --st-booked-bg: color-mix(in srgb, var(--accent-slate) 14%, var(--paper)); --st-pending: color-mix(in srgb, var(--gold-deep) 70%, var(--ink)); /* deep gold */ --st-pending-bg:color-mix(in srgb, var(--gold-deep) 16%, var(--paper)); --st-done: color-mix(in srgb, var(--accent-green) 65%, var(--ink)); /* olive detail */ --st-done-bg: color-mix(in srgb, var(--accent-green) 16%, var(--paper)); --st-cancel: color-mix(in srgb, var(--pink-pop) 75%, var(--ink)); /* clay red */ --st-cancel-bg: color-mix(in srgb, var(--pink-pop) 13%, var(--paper)); --st-cancel-strong: var(--pop-ink); /* danger hover (same ink-darkened clay red as booking errors) */ --st-cancel-border: color-mix(in srgb, var(--pink-pop) 35%, transparent); /* danger-ghost border */ --st-noshow: var(--wine-soft); /* warm umber */ --st-noshow-bg: color-mix(in srgb, var(--wine-soft) 12%, var(--paper)); --a-radius: 14px; /* standard card radius */ --a-radius-sm: 10px; /* small-control radius (the 9px/11px literals in admin.css are intentional one-offs, not strays) */ --a-shadow: 0 1px 2px rgba(28, 26, 24, 0.04), 0 8px 24px -12px rgba(28, 26, 24, 0.18); --a-shadow-lg: 0 12px 40px -16px rgba(28, 26, 24, 0.28); --a-shadow-sm: 0 1px 3px rgba(28, 26, 24, 0.12); /* seg .on lift */ --a-shadow-up: 0 -10px 24px -16px rgba(28, 26, 24, 0.3); /* savebar top shadow */ } /* ============================================================ DARK THEME — "brown + gold" (the booking site's second mood) ------------------------------------------------------------ Activated by data-theme="dark" on (set pre-paint by public/theme.js; flipped by the in-UI ThemeToggle). This is a TRUE second theme, not a per-screen flip: the whole booking UI switches. How it works: the palette tokens above double as semantic ROLES, so we override only the *theme-able* role VALUES here and let everything derived (color-mix inks, hairlines, the CTA, cards) recompute. CONTENT colors that depict real things — the brand gold, skin tones, and the nail-finish swatches — are pinned to their light values so a french tip still looks like a french tip in either mode. A few inversion patterns ("dark fill = selected/primary") can't auto-flip and are handled by [data-theme="dark"] rules in booking.css. Admin never sets data-theme, so the studio console stays light. ============================================================ */ :root[data-theme="dark"] { /* ---- Canvas — espresso gradient instead of dusty rose ---- */ --cream: #2a1408; /* page base — deep espresso */ --wash-1: #3a1f10; /* warm-brown top wash */ --wash-2: #2a1408; --wash-3: #321a0d; --wash-4: #1d0d05; /* darkest bottom wash */ --tray-fade: #3a1f10; --blush: #3f2415; /* soft fill / well — warm dark brown (UI role; swatches re-pinned below) */ --bubblegum: #4a2a18; --pink-soft: #4a2c1a; /* hover borders / wells */ /* ---- Surfaces — lifted warm-brown panels (sit ABOVE --cream) ---- */ --paper: #39200f; /* card surface */ --card-sel: #4a2c17; /* selected card */ --card-sel-2: #5c3820; /* selected deeper tone */ /* ---- Ink scale flips light (warm ivory + tan); derived inks recompute ---- */ --ink: #f3e7d1; /* primary text — warm ivory */ --accent-black: #efe2c9; /* wordmark roman / depth text */ --wine-soft: #d8b988; /* secondary text — tan-gold */ --skin-deep: #6c3216; /* RE-PIN: keep hand/foot illustration shadows natural (wine-soft is gold in dark) */ /* ---- Accents → champagne gold ---- */ --cherry: #e7c275; /* primary selection/accent (borders, prices, italic accents) */ --cognac: #a8602a; /* warm fill that still carries white badge text (kept cognac, not gold) */ --gold: #e7c275; /* swirl underline / texture dots — brighter on espresso */ --pink-pop: #df6f47; /* clay → brighter coral so badges/dark-card prices read on espresso */ /* ---- Structural-dark tokens → RAISED brown panels (so .opt-dark/.tile-dark read on a dark page) ---- */ --dark-card-1: #4a2913; --dark-card-2: #381f0e; --dark-sel-1: #5c3a1d; --dark-sel-2: #6e4623; --wine: #0a0502; /* lightbox scrim stays near-black (must NOT follow --ink light) */ /* ---- Content swatches RE-PINNED to literal pinks — nail-finish previews are accurate in both modes ---- */ --swatch-solid: linear-gradient(180deg, #f4d0cd, #e49eb7); --swatch-ombre: linear-gradient(180deg, #f6f4ee 0%, #f4d0cd 60%, #b0601f 100%); --swatch-marble: radial-gradient(circle at 30% 20%, #f6f4ee 0%, transparent 18%), radial-gradient(circle at 70% 60%, #f4d0cd 0%, transparent 28%), radial-gradient(circle at 50% 80%, #5a5e72 0%, transparent 30%), linear-gradient(135deg, #f6f4ee 0%, #d6b998 60%, #5a5e72 100%); --swatch-tip-edge: color-mix(in srgb, #b0601f 25%, transparent); }