/* ============================================================ Wepic — design tokens ------------------------------------------------------------ Reconciled against the live codebase (Events-Manager): · landing.css / event-manager.css → the fixed app brand (violet + gold + plum, Secular One display) ⇒ :root · themes.css / site.css → the themeable guest gallery (green / lavender / cream floral, per-theme fonts) ⇒ [data-theme="…"] Components reference role names only — never raw values. Direction: RTL is the default. Always use logical properties (margin-inline-*, padding-inline-*, inset-inline-*, border- inline-*) in component CSS — never left / right. ============================================================ */ /* ============================================================ Responsive breakpoints — the canonical scale ------------------------------------------------------------ These four max-width tiers are the backbone for every page. New responsive rules should target one of them; only add an off-scale value when a specific component genuinely needs an intermediate step (add by need, not by device name). 1200px · laptop / smaller desktop 1024px · tablet (landscape) — primary "desktop → tablet" 768px · tablet portrait / large mobile — primary mobile 480px · small mobile NOTE: CSS variables can't be used inside @media conditions, so this scale is a documented convention, not a token. The numbers above are the source of truth; mirror them literally in `@media (max-width: …)`. By-need sub-tiers that intentionally deviate (kept because a component needs them — see docs/responsive-breakpoints.md): · 360 small-phone gallery tightening (site.css) · 420 narrowest-phone gallery toolbar (admin-gallery.css) · 520 photo-grid 3-col step / 600–700 admin phone tweaks · 800 table → cards (≈ 760px table min-width + padding) · 960 / 980 / 1100 marketing-hero & live-preview splits Sub-pixel guards (e.g. 767.98) avoid double-applying with a paired min-width at the exact boundary — keep the .98 form. ============================================================ */ /* House faces. ── App brand ── Secular One (display) + Heebo (body). ── Gallery themes ── swap in their own title/heading/body families. Fonts are NOT @import-ed here: a CSS @import is render-blocking AND chained (the browser must download+parse this file before it can even discover the font URLs). Every surface instead loads exactly the families it needs via its own — brand pages → Heebo + Secular One; gallery / my-photos / admin → the full theme-font set. Importing them here only re-downloaded those fonts and forced ~13 unused families onto every page. */ /* ============================================================ :root — the canonical theme: APP BRAND (violet + gold + plum) Used on landing, event-manager console, affiliate, admin — anywhere outside the guest gallery. This is the brand the product wears 90% of the time. NOT theme-able. ============================================================ */ :root { /* ---------- type ---------- */ /* Display = Secular One (single-weight Hebrew display face — reads heavy by design). Body = Heebo. A separate heading role exists so gallery themes can introduce a serif. */ --font-display: "Secular One", "Heebo", "Arial Hebrew", system-ui, sans-serif; --font-heading: "Secular One", "Heebo", "Arial Hebrew", system-ui, sans-serif; --font-text: "Heebo", "Assistant", "Arial Hebrew", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-md: 16px; /* body default */ --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 34px; --text-4xl: 44px; --text-5xl: 56px; --lh-tight: 1.15; --lh-snug: 1.32; --lh-normal: 1.7; /* the codebase runs Hebrew body at 1.7 */ --lh-loose: 1.85; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 800; /* Heebo 800 for emphatic body; display face is single-weight */ --tracking-tight: 0.01em; /* Secular One sits better very slightly open */ --tracking-snug: 0; --tracking-normal: 0; --tracking-wide: 0.03em; --tracking-caps: 0.04em; /* ---------- spacing (4-based) ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 56px; --space-11: 64px; --space-12: 80px; --space-13: 96px; --space-14: 112px; --space-15: 128px; --space-16: 160px; /* ---------- radii ---------- */ /* Matched to the codebase: inputs 14, cards 16, panels 20–22, hero/table wraps 22–24, phone bezel 38, everything else pill. */ --radius-xs: 8px; /* chips, small badges, code */ --radius-sm: 14px; /* inputs, selects, textareas */ --radius-md: 16px; /* cards, stats, header card */ --radius-lg: 20px; /* primary panels (lp-radius) */ --radius-xl: 24px; /* hero panels, table wraps, db-hero */ --radius-2xl: 38px; /* phone bezel / large feature shells */ --radius-pill: 999px; /* all buttons, tabs, chips, badges */ --radius-full: 50%; /* ---------- elevation (tinted with plum #221145) ---------- */ --shadow-1: 0 1px 2px rgba(34, 17, 69, 0.06), 0 1px 1px rgba(34, 17, 69, 0.05); --shadow-2: 0 10px 24px rgba(34, 17, 69, 0.08), 0 3px 6px rgba(34, 17, 69, 0.05); --shadow-3: 0 18px 50px rgba(34, 17, 69, 0.14), 0 6px 12px rgba(34, 17, 69, 0.07); --shadow-4: 0 28px 80px rgba(34, 17, 69, 0.20), 0 12px 22px rgba(34, 17, 69, 0.10); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7); /* accent button lift (violet) + the brand's gold hero glow */ --shadow-accent: 0 12px 28px rgba(124, 92, 255, 0.34); --shadow-glow: 0 0 0 6px rgba(124, 92, 255, 0.16), 0 18px 40px rgba(124, 92, 255, 0.32); /* ---------- motion ---------- */ --dur-fast: 120ms; --dur: 180ms; /* codebase default transition */ --dur-slow: 320ms; --dur-overlay: 240ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-emphasized: cubic-bezier(.2, 0, 0, 1.15); --ease-decel: cubic-bezier(0, 0, 0, 1); --ease-accel: cubic-bezier(.4, 0, 1, 1); /* ---------- z ---------- */ --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ---------- breakpoints (reference; use in @media) ---------- */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* ---------- container widths ---------- */ --container-narrow: 760px; /* legal copy / single-column (lp-container--narrow) */ --container: 1180px; /* landing default (lp-container) */ --container-wide: 1280px; /* gallery, console */ /* ---------- emoji rule ---------- */ --emoji-size: 1em; --emoji-shift: -0.06em; /* ---------- decorative band ---------- */ --ornament-variant: minimal; /* app brand: minimal. Gallery themes set floral. */ /* ============================================================ COLOR ROLES — canonical APP BRAND (violet + gold + plum) Anchored on the live --lp-* palette from landing.css / event-manager.css. ============================================================ */ /* surfaces */ --color-surface-1: #f7f4ff; /* page bg (lp-cream) — violet-tinted near-white */ --color-surface-2: #ffffff; /* card / paper (lp-paper) */ --color-surface-3: #f2ecff; /* raised tint / hover bg */ --color-surface-inverse: #221145; /* dark hero / header card (lp-plum-deep) */ --color-surface-inverse-2: #3a2363; /* hero gradient top (lp-plum) */ /* text */ --color-text-strong: #1c1330; /* lp-ink — body emphasis, darkest */ --color-text: #2a2044; /* default body */ --color-text-muted: #6c6585; /* lp-mute */ --color-text-disabled: #a59fb8; --color-text-on-accent: #ffffff; --color-text-on-inverse:#f1ecff; --color-heading: #3a2363; /* lp-plum — display / headings on light surfaces */ /* borders */ --color-border-subtle: #efeafa; --color-border: #e7e2f3; /* lp-line */ --color-border-strong: #c9bfe6; --color-border-focus: #f4b740; /* GOLD ring — matches input focus in the codebase */ /* accent — house violet (lp-violet) */ --color-accent: #7c5cff; --color-accent-hover: #5d3df0; /* gradient end / hover */ --color-accent-active: #4f2fd6; --color-accent-disabled:#cfc4f7; --color-accent-soft: #efeaff; /* violet-tinted surface */ --color-accent-strong: #3a2363; /* plum */ --color-accent-violet-soft: #a892ff; /* lp-violet-soft */ --color-on-accent: #ffffff; /* gold — first-class secondary accent (lp-gold). CTAs, hero glow, focus ring, premium-package highlights. */ --color-gold: #f4b740; --color-gold-hover: #d99a1f; /* lp-gold-deep */ --color-gold-active: #bf850f; --color-gold-soft: #fdf1d4; --color-on-gold: #221145; /* plum-deep text on gold (lp-nav__cta) */ /* gallery floral decorative pair (kept for ornaments / hearts) */ --color-blush: #e8dce8; --color-blush-soft: #f4ecf4; --color-rose: #c06080; --color-leaf: #5a8a6a; --color-leaf-soft: #d9ecd9; /* status — bg-soft / fg / border (from --lp-success/-danger) */ --color-success: #2f9e6a; --color-success-fg: #15593d; /* lp-success-text */ --color-success-bg: #e6f6ee; /* rgba(76,197,142,.14) flattened */ --color-success-border: #b7e6cf; --color-warning: #d99a1f; /* gold-deep family */ --color-warning-fg: #7a5300; --color-warning-bg: #fdf1d4; --color-warning-border: #f3d99a; --color-danger: #c54d4d; /* lp-danger */ --color-danger-fg: #8b2435; /* lp-danger-text */ --color-danger-bg: #f9e6e6; /* rgba(197,77,77,.14) flattened */ --color-danger-border: #ecc1c1; --color-info: #5d3df0; /* violet family */ --color-info-fg: #2f1f7a; --color-info-bg: #ece7ff; --color-info-border: #cfc4f7; /* overlay scrim (lightbox / modal) — 3 levels, plum-tinted */ --color-scrim-1: rgba(24, 12, 48, 0.34); --color-scrim-2: rgba(24, 12, 48, 0.62); --color-scrim-3: rgba(18, 8, 38, 0.92); /* decorative imagery */ --bg-image-url: none; --bg-overlay-opacity: 0; /* likes / heart sentiment (was hard-coded #ff8da1 in site/lightbox) */ --color-like: #ff8da1; /* app-brand fallbacks for the gallery-name compat layer (ds-bridge.css). Themed surfaces override these per [data-theme]; these only apply to a non-themed surface that reads a gallery name. */ --color-surface-glass: rgba(255, 255, 255, 0.82); --color-border-soft: rgba(124, 92, 255, 0.18); --color-bg-gradient-1: rgba(124, 92, 255, 0.12); --color-bg-gradient-2: rgba(244, 183, 64, 0.10); --color-bg-gradient-3: rgba(124, 92, 255, 0.06); /* hero glow on dark surfaces — GOLD, as in landing's hero */ --color-hero-glow: rgba(244, 183, 64, 0.32); /* page background field — the app's signature violet+gold radials */ --bg-field: radial-gradient(900px 540px at 90% -10%, rgba(124, 92, 255, 0.16), transparent 62%), radial-gradient(700px 480px at -10% 15%, rgba(244, 183, 64, 0.12), transparent 58%), linear-gradient(180deg, #fbf9ff 0%, #f2ecff 48%, #f7f4ff 100%); } /* ============================================================ GUEST-GALLERY THEMES - consolidated single source of truth. Applied via [data-theme] on . Each block remaps the app role tokens onto a colour family + its own type pairing, and is the ONLY home of that theme's palette (themes.css retired). The gallery's legacy names (--green / --lavender / --cream / --text-light / --bg-gradient-1..3 / ...) reach these via ds-bridge.css. Muted text (--color-text-muted) is WCAG-AA tuned (>=4.5:1). Spacing, radius, motion, z never theme. ============================================================ */ /* -- Botanical */ [data-theme="botanical"] { --color-surface-1: #f5f0e6; --color-surface-2: #ffffff; --color-surface-3: #f0ebe0; --color-surface-glass: rgba(255, 255, 255, 0.82); --color-surface-inverse: #2e2e22; --color-text-strong: #3a3a2a; --color-text: #5a5a48; --color-text-muted: #6e6d60; --color-heading: #4a7a5a; --color-border-subtle: #f0ebe0; --color-border: #dcd8cf; --color-border-strong: #bfbbb3; --color-border-soft: rgba(154, 133, 184, 0.2); --color-border-focus: #5a8a6a; --color-accent: #5a8a6a; --color-accent-hover: #4a7a5a; --color-accent-active: #3d644a; --color-accent-soft: #c5b8d8; --color-accent-strong: #7a6a8a; --color-on-accent: #ffffff; --color-blush: #9a85b8; --color-blush-soft: #e8dce8; --color-leaf: #a8c6a8; --color-bg-gradient-1: rgba(154, 133, 184, 0.12); --color-bg-gradient-2: rgba(168, 198, 168, 0.15); --color-bg-gradient-3: rgba(154, 133, 184, 0.08); --color-hero-glow: rgba(90, 138, 106, 0.3); --font-display: 'Playpen Sans Hebrew', cursive; --font-heading: 'Suez One', serif; --font-text: 'Heebo', sans-serif; --ornament-variant: floral; } /* -- Rose Gold */ [data-theme="rosegold"] { --color-surface-1: #fdf2f0; --color-surface-2: #ffffff; --color-surface-3: #f8e8e0; --color-surface-glass: rgba(255, 248, 245, 0.85); --color-surface-inverse: #3b2626; --color-text-strong: #4a3030; --color-text: #6a4848; --color-text-muted: #7e6969; --color-heading: #9a5060; --color-border-subtle: #f8e8e0; --color-border: #e4dad8; --color-border-strong: #c5bdbb; --color-border-soft: rgba(183, 110, 121, 0.2); --color-border-focus: #b76e79; --color-accent: #b76e79; --color-accent-hover: #9a5060; --color-accent-active: #7e424f; --color-accent-soft: #dcc4a0; --color-accent-strong: #a07850; --color-on-accent: #ffffff; --color-blush: #c49a6c; --color-blush-soft: #f0d8d4; --color-leaf: #e8c4c4; --color-bg-gradient-1: rgba(183, 110, 121, 0.1); --color-bg-gradient-2: rgba(196, 154, 108, 0.1); --color-bg-gradient-3: rgba(183, 110, 121, 0.06); --color-hero-glow: rgba(183, 110, 121, 0.3); --font-display: 'Great Vibes', cursive; --font-heading: 'Frank Ruhl Libre', serif; --font-text: 'Assistant', sans-serif; --ornament-variant: floral; } /* -- Royal Blue */ [data-theme="royalblue"] { --color-surface-1: #f0f4fa; --color-surface-2: #ffffff; --color-surface-3: #e8eef5; --color-surface-glass: rgba(245, 248, 255, 0.85); --color-surface-inverse: #222633; --color-text-strong: #2a3040; --color-text: #4a5060; --color-text-muted: #696e7c; --color-heading: #3a5a8a; --color-border-subtle: #e8eef5; --color-border: #d8dce1; --color-border-strong: #bbbec3; --color-border-soft: rgba(74, 111, 165, 0.2); --color-border-focus: #4a6fa5; --color-accent: #4a6fa5; --color-accent-hover: #3a5a8a; --color-accent-active: #304a71; --color-accent-soft: #dcc8a0; --color-accent-strong: #8a7a5a; --color-on-accent: #ffffff; --color-blush: #c4a86c; --color-blush-soft: #dce4f0; --color-leaf: #8aaad4; --color-bg-gradient-1: rgba(74, 111, 165, 0.1); --color-bg-gradient-2: rgba(196, 168, 108, 0.1); --color-bg-gradient-3: rgba(74, 111, 165, 0.06); --color-hero-glow: rgba(74, 111, 165, 0.3); --font-display: 'Noto Serif Hebrew', serif; --font-heading: 'David Libre', serif; --font-text: 'Rubik', sans-serif; --ornament-variant: floral; } /* -- Sunset */ [data-theme="sunset"] { --color-surface-1: #fef6e8; --color-surface-2: #ffffff; --color-surface-3: #fce8d8; --color-surface-glass: rgba(255, 250, 240, 0.85); --color-surface-inverse: #3b261a; --color-text-strong: #4a3020; --color-text: #6a4838; --color-text-muted: #886a5c; --color-heading: #b86a40; --color-border-subtle: #fce8d8; --color-border: #e5ddd1; --color-border-strong: #c6c0b5; --color-border-soft: rgba(212, 132, 90, 0.2); --color-border-focus: #d4845a; --color-accent: #d4845a; --color-accent-hover: #b86a40; --color-accent-active: #975734; --color-accent-soft: #d8a0b4; --color-accent-strong: #9a5070; --color-on-accent: #ffffff; --color-blush: #b86e8a; --color-blush-soft: #f8dcd0; --color-leaf: #f0c48a; --color-bg-gradient-1: rgba(184, 110, 138, 0.1); --color-bg-gradient-2: rgba(212, 132, 90, 0.12); --color-bg-gradient-3: rgba(184, 110, 138, 0.06); --color-hero-glow: rgba(212, 132, 90, 0.3); --font-display: 'Karantina', cursive; --font-heading: 'Secular One', sans-serif; --font-text: 'Varela Round', sans-serif; --ornament-variant: floral; } /* -- Minimalist */ [data-theme="minimalist"] { --color-surface-1: #fafafa; --color-surface-2: #ffffff; --color-surface-3: #f0f0f0; --color-surface-glass: rgba(255, 255, 255, 0.9); --color-surface-inverse: #151515; --color-text-strong: #1a1a1a; --color-text: #4a4a4a; --color-text-muted: #717171; --color-heading: #1a1a1a; --color-border-subtle: #f0f0f0; --color-border: #e1e1e1; --color-border-strong: #c3c3c3; --color-border-soft: rgba(0, 0, 0, 0.1); --color-border-focus: #2a2a2a; --color-accent: #2a2a2a; --color-accent-hover: #1a1a1a; --color-accent-active: #151515; --color-accent-soft: #c0c0c0; --color-accent-strong: #555555; --color-on-accent: #ffffff; --color-blush: #888888; --color-blush-soft: #e8e8e8; --color-leaf: #d0d0d0; --color-bg-gradient-1: rgba(0, 0, 0, 0.03); --color-bg-gradient-2: rgba(0, 0, 0, 0.02); --color-bg-gradient-3: rgba(0, 0, 0, 0.02); --color-hero-glow: rgba(42, 42, 42, 0.3); --font-display: 'Alef', sans-serif; --font-heading: 'Miriam Libre', sans-serif; --font-text: 'Miriam Libre', sans-serif; --ornament-variant: minimal; } /* -- Olive */ [data-theme="olive"] { --color-surface-1: #f4f1e8; --color-surface-2: #ffffff; --color-surface-3: #ece8d8; --color-surface-glass: rgba(250, 248, 240, 0.85); --color-surface-inverse: #2e2e20; --color-text-strong: #3a3a28; --color-text: #5a5a40; --color-text-muted: #6e6e55; --color-heading: #5a6a3a; --color-border-subtle: #ece8d8; --color-border: #dcd9d1; --color-border-strong: #bebcb5; --color-border-soft: rgba(107, 124, 74, 0.2); --color-border-focus: #6b7c4a; --color-accent: #6b7c4a; --color-accent-hover: #5a6a3a; --color-accent-active: #4a5730; --color-accent-soft: #d8c8a0; --color-accent-strong: #8a7a4a; --color-on-accent: #ffffff; --color-blush: #c4a86c; --color-blush-soft: #e4e0d0; --color-leaf: #a0b070; --color-bg-gradient-1: rgba(107, 124, 74, 0.1); --color-bg-gradient-2: rgba(196, 168, 108, 0.1); --color-bg-gradient-3: rgba(107, 124, 74, 0.06); --color-hero-glow: rgba(107, 124, 74, 0.3); --font-display: 'Amatic SC', cursive; --font-heading: 'Suez One', serif; --font-text: 'Heebo', sans-serif; --ornament-variant: floral; } /* -- Cherry Blossom */ [data-theme="cherry"] { --color-surface-1: #fdf0f5; --color-surface-2: #ffffff; --color-surface-3: #f8e4ee; --color-surface-glass: rgba(255, 248, 250, 0.85); --color-surface-inverse: #3b1a33; --color-text-strong: #4a2040; --color-text: #6a4060; --color-text-muted: #88637f; --color-heading: #a04868; --color-border-subtle: #f8e4ee; --color-border: #e4d8dc; --color-border-strong: #c5bbbf; --color-border-soft: rgba(192, 96, 128, 0.2); --color-border-focus: #c06080; --color-accent: #c06080; --color-accent-hover: #a04868; --color-accent-active: #833b55; --color-accent-soft: #c8a8c0; --color-accent-strong: #7a5070; --color-on-accent: #ffffff; --color-blush: #9a7090; --color-blush-soft: #f0d8e4; --color-leaf: #e8a0b8; --color-bg-gradient-1: rgba(192, 96, 128, 0.1); --color-bg-gradient-2: rgba(154, 112, 144, 0.1); --color-bg-gradient-3: rgba(192, 96, 128, 0.06); --color-hero-glow: rgba(192, 96, 128, 0.3); --font-display: 'Playpen Sans Hebrew', cursive; --font-heading: 'Noto Serif Hebrew', serif; --font-text: 'Assistant', sans-serif; --ornament-variant: floral; } /* -- Midnight Elegance */ [data-theme="midnight"] { --color-surface-1: #1a1a2e; --color-surface-2: #22223a; --color-surface-3: #22223a; --color-surface-glass: rgba(30, 30, 50, 0.85); --color-surface-inverse: #0e0e19; --color-text-strong: #e8e0d0; --color-text: #c0b8a8; --color-text-muted: #8a8498; --color-text-on-inverse: #e8e0d0; --color-heading: #b89830; --color-border-subtle: #22223a; --color-border: #313143; --color-border-strong: #4c4c5c; --color-border-soft: rgba(212, 175, 55, 0.2); --color-border-focus: #d4af37; --color-accent: #d4af37; --color-accent-hover: #b89830; --color-accent-active: #977d27; --color-accent-soft: #c8c0d0; --color-accent-strong: #a8a0b8; --color-on-accent: #ffffff; --color-blush: #a8a0b8; --color-blush-soft: #2a2a44; --color-leaf: #e8d080; --color-bg-gradient-1: rgba(212, 175, 55, 0.08); --color-bg-gradient-2: rgba(168, 160, 184, 0.08); --color-bg-gradient-3: rgba(212, 175, 55, 0.05); --color-scrim-1: rgba(0,0,0,0.5); --color-scrim-2: rgba(0,0,0,0.78); --color-scrim-3: rgba(0,0,0,0.96); --color-hero-glow: rgba(212, 175, 55, 0.3); --font-display: 'Frank Ruhl Libre', serif; --font-heading: 'David Libre', serif; --font-text: 'Rubik', sans-serif; --ornament-variant: minimal; } /* -- Champagne Editorial */ [data-theme="champagne"] { --color-surface-1: #fff8f1; --color-surface-2: #ffffff; --color-surface-3: #f5ebdf; --color-surface-glass: rgba(255, 251, 247, 0.86); --color-surface-inverse: #2a1f19; --color-text-strong: #35271f; --color-text: #5a473b; --color-text-muted: #816f62; --color-heading: #936645; --color-border-subtle: #f5ebdf; --color-border: #e6dfd9; --color-border-strong: #c7c1bc; --color-border-soft: rgba(185, 138, 95, 0.18); --color-border-focus: #b98a5f; --color-accent: #b98a5f; --color-accent-hover: #936645; --color-accent-active: #795439; --color-accent-soft: #cbb39d; --color-accent-strong: #5d4436; --color-on-accent: #ffffff; --color-blush: #7d5d4a; --color-blush-soft: #ecdfd0; --color-leaf: #e6c7a6; --color-bg-gradient-1: rgba(185, 138, 95, 0.12); --color-bg-gradient-2: rgba(125, 93, 74, 0.08); --color-bg-gradient-3: rgba(230, 199, 166, 0.14); --color-hero-glow: rgba(185, 138, 95, 0.3); --font-display: 'Frank Ruhl Libre', serif; --font-heading: 'David Libre', serif; --font-text: 'Assistant', sans-serif; --ornament-variant: floral; } /* -- Atelier Mono */ [data-theme="atelier"] { --color-surface-1: #fbf8f4; --color-surface-2: #ffffff; --color-surface-3: #f1ece5; --color-surface-glass: rgba(255, 255, 255, 0.84); --color-surface-inverse: #181a1a; --color-text-strong: #1e2021; --color-text: #4c5052; --color-text-muted: #75716b; --color-heading: #171c1d; --color-border-subtle: #f1ece5; --color-border: #e2dfdc; --color-border-strong: #c4c1be; --color-border-soft: rgba(45, 52, 54, 0.12); --color-border-focus: #2d3436; --color-accent: #2d3436; --color-accent-hover: #171c1d; --color-accent-active: #131718; --color-accent-soft: #d0beb5; --color-accent-strong: #654f45; --color-on-accent: #ffffff; --color-blush: #8b6f62; --color-blush-soft: #e7ddd3; --color-leaf: #bcc3c6; --color-bg-gradient-1: rgba(45, 52, 54, 0.06); --color-bg-gradient-2: rgba(139, 111, 98, 0.08); --color-bg-gradient-3: rgba(188, 195, 198, 0.1); --color-hero-glow: rgba(45, 52, 54, 0.3); --font-display: 'Alef', sans-serif; --font-heading: 'Noto Serif Hebrew', serif; --font-text: 'Rubik', sans-serif; --ornament-variant: minimal; } /* -- Emerald Luxe */ [data-theme="emerald"] { --color-surface-1: #f4f2eb; --color-surface-2: #ffffff; --color-surface-3: #e9e4d8; --color-surface-glass: rgba(247, 245, 239, 0.84); --color-surface-inverse: #142a24; --color-text-strong: #19342d; --color-text: #3f5f57; --color-text-muted: #5b736c; --color-heading: #14473d; --color-border-subtle: #e9e4d8; --color-border: #dcdad4; --color-border-strong: #bebdb7; --color-border-soft: rgba(31, 106, 90, 0.18); --color-border-focus: #1f6a5a; --color-accent: #1f6a5a; --color-accent-hover: #14473d; --color-accent-active: #103a32; --color-accent-soft: #dfcfab; --color-accent-strong: #8b7348; --color-on-accent: #ffffff; --color-blush: #c4a46b; --color-blush-soft: #d9e4de; --color-leaf: #7fb5a6; --color-bg-gradient-1: rgba(31, 106, 90, 0.12); --color-bg-gradient-2: rgba(196, 164, 107, 0.1); --color-bg-gradient-3: rgba(127, 181, 166, 0.12); --color-hero-glow: rgba(31, 106, 90, 0.3); --font-display: 'David Libre', serif; --font-heading: 'Suez One', serif; --font-text: 'Heebo', sans-serif; --ornament-variant: floral; } /* -- Lavender */ [data-theme="lavender"] { --color-surface-1: #f6f1f8; --color-surface-2: #ffffff; --color-surface-3: #ece6f0; --color-surface-glass: rgba(252, 248, 255, 0.86); --color-surface-inverse: #2e223a; --color-text-strong: #3a2a48; --color-text: #5a4868; --color-text-muted: #776783; --color-heading: #6a4d98; --color-border-subtle: #ece6f0; --color-border: #ddd9df; --color-border-strong: #c0bcc1; --color-border-soft: rgba(138, 109, 184, 0.18); --color-border-focus: #8a6db8; --color-accent: #8a6db8; --color-accent-hover: #6a4d98; --color-accent-active: #573f7d; --color-accent-soft: #e0c8d4; --color-accent-strong: #9a7488; --color-on-accent: #ffffff; --color-blush: #c8a4b8; --color-blush-soft: #e0d4ea; --color-leaf: #c8b8e0; --color-bg-gradient-1: rgba(138, 109, 184, 0.10); --color-bg-gradient-2: rgba(200, 164, 184, 0.12); --color-bg-gradient-3: rgba(138, 109, 184, 0.06); --color-hero-glow: rgba(138, 109, 184, 0.3); --font-display: 'Frank Ruhl Libre', serif; --font-heading: 'David Libre', serif; --font-text: 'Assistant', sans-serif; --ornament-variant: floral; } /* -- Terracotta */ [data-theme="terracotta"] { --color-surface-1: #fbf3eb; --color-surface-2: #ffffff; --color-surface-3: #f2e2d2; --color-surface-glass: rgba(255, 250, 245, 0.85); --color-surface-inverse: #3b2013; --color-text-strong: #4a2818; --color-text: #6a4030; --color-text-muted: #7d695c; --color-heading: #a04830; --color-border-subtle: #f2e2d2; --color-border: #e2dbd4; --color-border-strong: #c4beb7; --color-border-soft: rgba(198, 106, 74, 0.18); --color-border-focus: #c66a4a; --color-accent: #c66a4a; --color-accent-hover: #a04830; --color-accent-active: #833b27; --color-accent-soft: #b8c098; --color-accent-strong: #6a7450; --color-on-accent: #ffffff; --color-blush: #8a9670; --color-blush-soft: #ecdcc4; --color-leaf: #e6a888; --color-bg-gradient-1: rgba(198, 106, 74, 0.10); --color-bg-gradient-2: rgba(138, 150, 112, 0.12); --color-bg-gradient-3: rgba(198, 106, 74, 0.05); --color-hero-glow: rgba(198, 106, 74, 0.3); --font-display: 'David Libre', serif; --font-heading: 'Suez One', serif; --font-text: 'Heebo', sans-serif; --ornament-variant: floral; } /* -- Moonlight */ [data-theme="moonlight"] { --color-surface-1: #1a1f30; --color-surface-2: #232a40; --color-surface-3: #232a40; --color-surface-glass: rgba(34, 40, 60, 0.85); --color-surface-inverse: #0e111a; --color-text-strong: #e8e8f0; --color-text: #c0c0d0; --color-text-muted: #8898b0; --color-text-on-inverse: #e8e8f0; --color-heading: #8090b8; --color-border-subtle: #232a40; --color-border: #313545; --color-border-strong: #4c505e; --color-border-soft: rgba(176, 192, 224, 0.20); --color-border-focus: #b0c0e0; --color-accent: #b0c0e0; --color-accent-hover: #8090b8; --color-accent-active: #697697; --color-accent-soft: #e0c898; --color-accent-strong: #8a7048; --color-on-accent: #ffffff; --color-blush: #c8a868; --color-blush-soft: #2a3050; --color-leaf: #d8e0f0; --color-bg-gradient-1: rgba(176, 192, 224, 0.08); --color-bg-gradient-2: rgba(200, 168, 104, 0.06); --color-bg-gradient-3: rgba(176, 192, 224, 0.05); --color-scrim-1: rgba(0,0,0,0.5); --color-scrim-2: rgba(0,0,0,0.78); --color-scrim-3: rgba(0,0,0,0.96); --color-hero-glow: rgba(176, 192, 224, 0.3); --font-display: 'Noto Serif Hebrew', serif; --font-heading: 'David Libre', serif; --font-text: 'Rubik', sans-serif; --ornament-variant: minimal; } /* -- Honey */ [data-theme="honey"] { --color-surface-1: #fef7e8; --color-surface-2: #ffffff; --color-surface-3: #fbecc8; --color-surface-glass: rgba(255, 252, 240, 0.86); --color-surface-inverse: #3b2d13; --color-text-strong: #4a3818; --color-text: #6a5028; --color-text-muted: #816c57; --color-heading: #a87520; --color-border-subtle: #fbecc8; --color-border: #e5ded1; --color-border-strong: #c6c1b5; --color-border-soft: rgba(212, 154, 58, 0.18); --color-border-focus: #d49a3a; --color-accent: #d49a3a; --color-accent-hover: #a87520; --color-accent-active: #8a601a; --color-accent-soft: #c8b098; --color-accent-strong: #784e30; --color-on-accent: #ffffff; --color-blush: #a08068; --color-blush-soft: #f5e0b8; --color-leaf: #ebcf8a; --color-bg-gradient-1: rgba(212, 154, 58, 0.10); --color-bg-gradient-2: rgba(160, 128, 104, 0.10); --color-bg-gradient-3: rgba(212, 154, 58, 0.06); --color-hero-glow: rgba(212, 154, 58, 0.3); --font-display: 'Frank Ruhl Libre', serif; --font-heading: 'Secular One', sans-serif; --font-text: 'Varela Round', sans-serif; --ornament-variant: floral; } /* -- Slate */ [data-theme="slate"] { --color-surface-1: #f4f5f7; --color-surface-2: #ffffff; --color-surface-3: #e8ebf0; --color-surface-glass: rgba(248, 250, 254, 0.85); --color-surface-inverse: #1a202e; --color-text-strong: #20283a; --color-text: #404a60; --color-text-muted: #676e7d; --color-heading: #3a4a60; --color-border-subtle: #e8ebf0; --color-border: #dcdcde; --color-border-strong: #bebfc1; --color-border-soft: rgba(90, 106, 128, 0.18); --color-border-focus: #5a6a80; --color-accent: #5a6a80; --color-accent-hover: #3a4a60; --color-accent-active: #303d4f; --color-accent-soft: #e8c8b8; --color-accent-strong: #a08068; --color-on-accent: #ffffff; --color-blush: #d4a890; --color-blush-soft: #ecd8cc; --color-leaf: #98a8c0; --color-bg-gradient-1: rgba(90, 106, 128, 0.10); --color-bg-gradient-2: rgba(212, 168, 144, 0.10); --color-bg-gradient-3: rgba(90, 106, 128, 0.05); --color-hero-glow: rgba(90, 106, 128, 0.3); --font-display: 'Alef', sans-serif; --font-heading: 'Miriam Libre', sans-serif; --font-text: 'IBM Plex Sans Hebrew', sans-serif; --ornament-variant: minimal; } /* -- Berry */ [data-theme="berry"] { --color-surface-1: #fdf4f4; --color-surface-2: #ffffff; --color-surface-3: #f5e0e2; --color-surface-glass: rgba(254, 248, 250, 0.86); --color-surface-inverse: #2e1320; --color-text-strong: #3a1828; --color-text: #5a3040; --color-text-muted: #886878; --color-heading: #6a2040; --color-border-subtle: #f5e0e2; --color-border: #e4dcdc; --color-border-strong: #c5bebe; --color-border-soft: rgba(138, 48, 80, 0.18); --color-border-focus: #8a3050; --color-accent: #8a3050; --color-accent-hover: #6a2040; --color-accent-active: #571a34; --color-accent-soft: #e0b8bc; --color-accent-strong: #966068; --color-on-accent: #ffffff; --color-blush: #c89098; --color-blush-soft: #ebd0d4; --color-leaf: #c08098; --color-bg-gradient-1: rgba(138, 48, 80, 0.10); --color-bg-gradient-2: rgba(200, 144, 152, 0.12); --color-bg-gradient-3: rgba(138, 48, 80, 0.05); --color-hero-glow: rgba(138, 48, 80, 0.3); --font-display: 'Frank Ruhl Libre', serif; --font-heading: 'Noto Serif Hebrew', serif; --font-text: 'Assistant', sans-serif; --ornament-variant: floral; } /* -- Bouquet */ [data-theme="bouquet"] { --color-surface-1: #f6f3ec; --color-surface-2: #ffffff; --color-surface-3: #ece6d8; --color-surface-glass: rgba(252, 250, 244, 0.86); --color-surface-inverse: #222e22; --color-text-strong: #2a3a2a; --color-text: #4a5a48; --color-text-muted: #667265; --color-heading: #386552; --color-border-subtle: #ece6d8; --color-border: #dddbd4; --color-border-strong: #c0beb8; --color-border-soft: rgba(74, 130, 104, 0.18); --color-border-focus: #4a8268; --color-accent: #4a8268; --color-accent-hover: #386552; --color-accent-active: #2e5343; --color-accent-soft: #d8c8a8; --color-accent-strong: #8a7a5a; --color-on-accent: #ffffff; --color-blush: #b8a888; --color-blush-soft: #e0d8c8; --color-leaf: #a8c6a8; --color-bg-gradient-1: rgba(74, 130, 104, 0.08); --color-bg-gradient-2: rgba(184, 168, 136, 0.10); --color-bg-gradient-3: rgba(74, 130, 104, 0.05); --color-hero-glow: rgba(74, 130, 104, 0.3); --font-display: 'Frank Ruhl Libre', serif; --font-heading: 'Suez One', serif; --font-text: 'Heebo', sans-serif; --ornament-variant: floral; } /* -- Carnival */ [data-theme="carnival"] { --color-surface-1: #fef6e8; --color-surface-2: #ffffff; --color-surface-3: #fae0d4; --color-surface-glass: rgba(255, 250, 240, 0.86); --color-surface-inverse: #3b2013; --color-text-strong: #4a2818; --color-text: #6a3838; --color-text-muted: #886a5c; --color-heading: #b06840; --color-border-subtle: #fae0d4; --color-border: #e5ddd1; --color-border-strong: #c6c0b5; --color-border-soft: rgba(212, 132, 90, 0.18); --color-border-focus: #d4845a; --color-accent: #d4845a; --color-accent-hover: #b06840; --color-accent-active: #905534; --color-accent-soft: #d8a0b4; --color-accent-strong: #905068; --color-on-accent: #ffffff; --color-blush: #b8748a; --color-blush-soft: #f5d0d4; --color-leaf: #f0c48a; --color-bg-gradient-1: rgba(212, 132, 90, 0.10); --color-bg-gradient-2: rgba(184, 116, 138, 0.10); --color-bg-gradient-3: rgba(212, 175, 55, 0.06); --color-hero-glow: rgba(212, 132, 90, 0.3); --font-display: 'Karantina', cursive; --font-heading: 'Secular One', sans-serif; --font-text: 'Varela Round', sans-serif; --ornament-variant: floral; } /* -- Marina */ [data-theme="marina"] { --color-surface-1: #f4f7f8; --color-surface-2: #ffffff; --color-surface-3: #e0eaef; --color-surface-glass: rgba(248, 252, 254, 0.86); --color-surface-inverse: #152633; --color-text-strong: #1a3040; --color-text: #345060; --color-text-muted: #5f7382; --color-heading: #1f5468; --color-border-subtle: #e0eaef; --color-border: #dcdedf; --color-border-strong: #bec1c1; --color-border-soft: rgba(46, 112, 136, 0.18); --color-border-focus: #2e7088; --color-accent: #2e7088; --color-accent-hover: #1f5468; --color-accent-active: #194555; --color-accent-soft: #dccca0; --color-accent-strong: #8a7050; --color-on-accent: #ffffff; --color-blush: #c4a86c; --color-blush-soft: #d8e4ea; --color-leaf: #88b8c8; --color-bg-gradient-1: rgba(46, 112, 136, 0.10); --color-bg-gradient-2: rgba(196, 168, 108, 0.10); --color-bg-gradient-3: rgba(46, 112, 136, 0.05); --color-hero-glow: rgba(46, 112, 136, 0.3); --font-display: 'David Libre', serif; --font-heading: 'Noto Serif Hebrew', serif; --font-text: 'Rubik', sans-serif; --ornament-variant: minimal; } /* -- Andalusia */ [data-theme="andalusia"] { --color-surface-1: #faf2e4; --color-surface-2: #ffffff; --color-surface-3: #f0dec0; --color-surface-glass: rgba(254, 248, 236, 0.86); --color-surface-inverse: #2e1a0a; --color-text-strong: #3a200c; --color-text: #5a3818; --color-text-muted: #84673e; --color-heading: #783c14; --color-border-subtle: #f0dec0; --color-border: #e1dacd; --color-border-strong: #c3bdb2; --color-border-soft: rgba(168, 86, 40, 0.20); --color-border-focus: #a85628; --color-accent: #a85628; --color-accent-hover: #783c14; --color-accent-active: #623110; --color-accent-soft: #e8c878; --color-accent-strong: #8a6818; --color-on-accent: #ffffff; --color-blush: #d4a838; --color-blush-soft: #ecd8b4; --color-leaf: #d49060; --color-bg-gradient-1: rgba(168, 86, 40, 0.10); --color-bg-gradient-2: rgba(212, 168, 56, 0.10); --color-bg-gradient-3: rgba(168, 86, 40, 0.06); --color-hero-glow: rgba(168, 86, 40, 0.3); --font-display: 'Amatic SC', cursive; --font-heading: 'Suez One', serif; --font-text: 'Heebo', sans-serif; --ornament-variant: floral; } /* ============================================================ prefers-reduced-motion — global decorative-animation kill. ============================================================ */ :root { --motion-decorative: 1; } @media (prefers-reduced-motion: reduce) { :root { --motion-decorative: 0; } }