/* ================================================================ RENTVALA — Design Tokens (single source of truth) Loaded FIRST on every page (public, admin, auth, standalone). RULES ───── 1. Every colour in the product is defined HERE, once for light (:root) and once for dark ([data-theme="dark"]). 2. No other stylesheet or view may introduce a raw hex that should respond to the theme — consume these variables. 3. The attribute is ALWAYS set (light or dark) by the inline head script in every layout, so selectors can rely on it. There is intentionally NO automatic prefers-color-scheme CSS block — the head script resolves the OS preference once on first visit and stores the choice. ================================================================ */ :root { /* ── Brand (mint green family — anchor #5FC7A4) ───────────── */ --primary: #5FC7A4; /* brand fill, logos, highlights */ --primary-d: #3FB58F; /* buttons, hover */ --primary-dd: #1F7A6E; /* deep brand, gradients, footers */ --primary-ink: #17745A; /* AA-safe brand text on light bg */ --primary-l: #D8F0E7; /* soft tint fills */ --primary-ll: #F1FAF6; /* faintest tint */ --mint-banner: #AADED1; --accent: #FFE51F; /* brand yellow (logo key dot) */ --accent-ink: #8A6D00; /* ── Warm decorative fills (category cards etc.) ──────────── */ --warm-sand: #DCCFA8; --warm-peach: #F0C9A4; --warm-blush: #E3C6E7; --warm-mint: #ABD9C8; --warm-yellow: #FFE51F; /* ── Neutrals ─────────────────────────────────────────────── */ --ink: #16201C; /* primary text */ --ink-2: #2A3833; /* secondary text */ --muted: #5E726B; /* tertiary text (AA on surface) */ --muted-2: #8CA09A; /* quaternary / placeholders */ --line: #E7EEEB; /* hairlines */ --line-2: #DCE5E1; /* stronger borders */ --bg: #FFFFFF; /* page background */ --bg-soft: #F7FBF9; /* alternating sections */ --bg-mint: #D8F0E7; --surface: #FFFFFF; /* cards, modals, popovers */ --surface-2: #F2F6F4; /* inset fills, input groups */ --page-bg: #F4FAF8; /* admin content background */ --border: #E4EDE9; /* admin border alias */ /* ── Footer (always dark, both themes) ────────────────────── */ --footer-bg: #1A2420; --footer-ink: #AEBDB7; /* ── Semantic ─────────────────────────────────────────────── */ --success: #119A6C; --success-soft: #DCF5EB; --warning: #C77414; --warning-soft: #FCF0DC; --danger: #D2434A; --danger-soft: #FBE4E5; --info: #1379A8; --info-soft: #DFF1F9; --wa: #25D366; /* WhatsApp green */ /* ── Extended accents (dashboards, charts, CRM states) ────── */ --acc-purple: #7C3AED; --acc-purple-soft: #F0EAFD; --acc-blue: #2563EB; --acc-blue-soft: #E4EDFD; --acc-sky: #0284C7; --acc-sky-soft: #E0F2FD; --acc-cyan: #0891B2; --acc-cyan-soft: #DFF5FA; --acc-amber: #B45309; --acc-amber-soft: #FCF3DE; --acc-orange: #EA580C; --acc-orange-soft: #FDEEDE; --acc-pink: #BE185D; --acc-pink-soft: #FBE7F0; --acc-red: #DC2626; --acc-red-soft: #FBE5E5; --premium: #7C3AED; /* CRM "premium/converted" purple */ /* ── Admin sidebar ─────────────────────────────────────────── */ --sb-bg: #0D1F1A; --sb-text: rgba(255,255,255,.55); --sb-hover: rgba(95,199,164,.10); --sb-active: rgba(95,199,164,.18); --sb-active-text: #A8DECF; --sb-border: rgba(95,199,164,.08); /* ── Glow (theme-aware text glow for emphasis) ─────────────── */ --glow-color: rgba(63,181,143,.30); --glow-strong: rgba(63,181,143,.45); /* ── Shape ─────────────────────────────────────────────────── */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; --card-r: 14px; /* ── Elevation ────────────────────────────────────────────── */ --sh-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); --sh-2: 0 2px 6px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.04); --sh-3: 0 8px 28px rgba(15,23,42,.10); --sh-mint: 0 10px 30px rgba(95,199,164,.25); --sh-sm: var(--sh-1); --sh: var(--sh-2); /* ── Motion (shared rhythm for the whole product) ─────────── */ --ease: cubic-bezier(.2,.6,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --t-fast: .15s var(--ease); --t-med: .25s var(--ease); --t-slow: .45s var(--ease-out); --reveal-dur: .6s; --reveal-dist: 24px; } /* ════════════════════════════ DARK ═══════════════════════════ */ [data-theme="dark"] { --primary: #5FC7A4; --primary-d: #4EC9A4; --primary-dd: #2E9F84; --primary-ink: #7FDCBD; /* brand text on dark bg */ --primary-l: #1C3A31; /* tint fills become deep teal */ --primary-ll: #14271F; --mint-banner: #1C3A31; --accent: #FFE51F; --accent-ink: #FFE51F; --warm-sand: #2A2620; --warm-peach: #2E251F; --warm-blush: #2A222D; --warm-mint: #1A2E2A; --ink: #ECF4F0; --ink-2: #CBDBD4; --muted: #93A9A1; --muted-2: #6C8079; --line: #233029; --line-2: #2C3C34; --bg: #0C1411; --bg-soft: #101A16; --bg-mint: #1C3A31; --surface: #15211B; --surface-2: #1B2922; --page-bg: #0A1512; --border: #243429; --footer-bg: #08100D; --footer-ink: #93A9A1; --success: #3DD598; --success-soft: rgba(61,213,152,.14); --warning: #F0A04B; --warning-soft: rgba(240,160,75,.14); --danger: #F17076; --danger-soft: rgba(241,112,118,.14); --info: #56B8E6; --info-soft: rgba(86,184,230,.14); --acc-purple: #A78BFA; --acc-purple-soft: rgba(167,139,250,.14); --acc-blue: #7CA7F9; --acc-blue-soft: rgba(124,167,249,.14); --acc-sky: #58B7E8; --acc-sky-soft: rgba(88,183,232,.14); --acc-cyan: #4FC3DD; --acc-cyan-soft: rgba(79,195,221,.14); --acc-amber: #E8B566; --acc-amber-soft: rgba(232,181,102,.14); --acc-orange: #F49E6B; --acc-orange-soft: rgba(244,158,107,.14); --acc-pink: #F085B3; --acc-pink-soft: rgba(240,133,179,.14); --acc-red: #F08080; --acc-red-soft: rgba(240,128,128,.14); --premium: #A78BFA; --sb-bg: #081410; --sb-text: rgba(255,255,255,.55); --sb-hover: rgba(95,199,164,.10); --sb-active: rgba(95,199,164,.18); --sb-active-text: #A8DECF; --sb-border: rgba(95,199,164,.08); --glow-color: rgba(95,199,164,.45); --glow-strong: rgba(111,212,178,.75); --sh-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.35); --sh-2: 0 2px 6px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.30); --sh-3: 0 8px 28px rgba(0,0,0,.50); --sh-mint: 0 10px 30px rgba(95,199,164,.12); } /* ══════════════════ THEME SWITCH ANIMATION ════════════════════ .theme-switching is applied to for ~400ms by theme.js so every surface cross-fades instead of snapping. Removed after the transition so normal interactions stay instant. */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease, box-shadow .4s ease !important; } /* ─── Animated sun ⇄ moon toggle ─────────────────────────────── */ .theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem; padding: 0; transition: transform var(--t-med), background var(--t-med), color var(--t-med); } .theme-toggle:hover { transform: rotate(15deg) scale(1.08); color: var(--primary-ink); border-color: var(--primary); } .theme-toggle .tt-icon { display: inline-flex; transition: transform .45s var(--ease-spring), opacity .3s ease; } html.theme-switching .theme-toggle .tt-icon { transform: rotate(360deg) scale(.4); opacity: 0; } /* ─── Glow utility (emphasis text) ───────────────────────────── */ .glow-accent, .sec-headline em, .stz-display .accent { color: var(--primary-ink); text-shadow: 0 0 14px var(--glow-color); } [data-theme="dark"] .glow-accent, [data-theme="dark"] .sec-headline em, [data-theme="dark"] .stz-display .accent { text-shadow: 0 0 10px var(--glow-strong), 0 0 28px var(--glow-color); } /* ─── Reduced motion: kill ornamental animation globally ─────── */ @media (prefers-reduced-motion: reduce) { html.theme-switching, html.theme-switching * { transition: none !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }