/* VBedits Store – Main Stylesheet * Dual-mode (dark default, light optional). Switch via . * Brand palette: deep blue + vibrant orange. */ /* ── COLOR TOKENS ───────────────────────────────────────────── */ :root, :root[data-theme="dark"] { --bg: #0a0e1a; --bg2: #101728; --bg3: #1a2238; --bg-elevated: #141d33; --border: rgba(96,165,250,0.16); --border2: rgba(96,165,250,0.36); --text: #e8edf7; --text2: #94a3b8; --text3: #64748b; --brand: #3b82f6; /* royal blue */ --brand2: #60a5fa; /* lighter blue, hover */ --brand-deep: #1e40af; /* deep navy, for "edits" word in light mode */ --accent: #f97316; /* vibrant orange */ --accent2: #fb923c; /* lighter orange, hover */ --accent-soft: rgba(249,115,22,0.18); --brand-soft: rgba(59,130,246,0.14); --green: #10b981; --red: #ef4444; --amber: #f59e0b; --shadow: 0 10px 40px rgba(2,8,23,0.5), 0 0 30px rgba(59,130,246,0.06); --shadow-hover: 0 16px 50px rgba(2,8,23,0.6), 0 0 40px rgba(249,115,22,0.08); --hero-glow: radial-gradient(ellipse, rgba(249,115,22,0.18) 0%, rgba(59,130,246,0.10) 40%, transparent 70%); --header-bg: rgba(10,14,26,0.78); --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; color-scheme: dark; } :root[data-theme="light"] { --bg: #f7f9fc; /* warm off-white */ --bg2: #ffffff; --bg3: #eef2f7; /* light gray */ --bg-elevated: #ffffff; --border: rgba(15,23,42,0.10); --border2: rgba(15,23,42,0.22); --text: #0a0e1a; /* user-picked: dark-mode bg as foreground tone */ --text2: #101728; --text3: #1a2238; --brand: #101728; /* links + blue buttons — uses dark-mode bg2 */ --brand2: #1a2238; --brand-deep: #0a0e1a; --accent: #ea580c; /* darker orange for contrast on white */ --accent2: #f97316; --accent-soft: rgba(234,88,12,0.14); --brand-soft: rgba(37,99,235,0.10); --green: #059669; --red: #dc2626; --amber: #d97706; --shadow: 0 4px 24px rgba(15,23,42,0.06), 0 0 0 1px rgba(15,23,42,0.04); --shadow-hover: 0 10px 36px rgba(15,23,42,0.10); --hero-glow: radial-gradient(ellipse, rgba(234,88,12,0.14) 0%, rgba(37,99,235,0.08) 40%, transparent 70%); --header-bg: rgba(255,255,255,0.85); color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #f7f9fc; --bg2: #ffffff; --bg3: #eef2f7; --bg-elevated: #ffffff; --border: rgba(15,23,42,0.10); --border2: rgba(15,23,42,0.22); --text: #0a0e1a; --text2: #101728; --text3: #1a2238; --brand: #101728; --brand2: #1a2238; --brand-deep: #0a0e1a; --accent: #ea580c; --accent2: #f97316; --accent-soft: rgba(234,88,12,0.14); --brand-soft: rgba(37,99,235,0.10); --green: #059669; --red: #dc2626; --amber: #d97706; --shadow: 0 4px 24px rgba(15,23,42,0.06), 0 0 0 1px rgba(15,23,42,0.04); --shadow-hover: 0 10px 36px rgba(15,23,42,0.10); --hero-glow: radial-gradient(ellipse, rgba(234,88,12,0.14) 0%, rgba(37,99,235,0.08) 40%, transparent 70%); --header-bg: rgba(255,255,255,0.85); color-scheme: light; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ── FONT SIZE CUSTOM PROPERTIES (overridable from Admin → Apariencia) ───── * Each var has the design default as its initial value. The admin can * override any of them from /admin/settings.php?tab=appearance — the * chosen pixel value is emitted as an inline