/* verktyg.it design tokens — shared by imco / sibling tools. Default theme: light (set ). Dark tokens live on :root; light overrides on html[data-theme="light"]. */ :root { --font-sans: "Outfit", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 180ms; /* ── Dark palette (premium depth) ── */ color-scheme: dark; --bg-0: #06080f; --bg-1: #0e1420; --bg-2: #141b2a; --bg-3: #1a2438; --bg-elev: rgba(20, 28, 44, 0.82); --bg-glass: rgba(10, 16, 28, 0.72); --border: rgba(148, 163, 184, 0.14); --border-strong: rgba(148, 163, 184, 0.28); --text: #f1f5fb; --text-2: #a8b6cc; --text-3: #73839c; --accent: #5eead4; --accent-2: #38bdf8; --accent-soft: rgba(94, 234, 212, 0.14); --accent-soft-2: rgba(56, 189, 248, 0.14); --danger: #fb7185; --danger-soft: rgba(251, 113, 133, 0.14); --ok: #4ade80; --ok-soft: rgba(74, 222, 128, 0.14); --warn: #fbbf24; --editor-bg: #090e18; --chip-bg: rgba(255, 255, 255, 0.05); --scrollbar: rgba(148, 163, 184, 0.28); --grid-line: rgba(148, 163, 184, 0.055); --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 8px rgba(0, 0, 0, 0.35); --shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 28px rgba(0, 0, 0, 0.42), 0 22px 48px rgba(0, 0, 0, 0.28); --shadow-glow: 0 0 0 1px rgba(94, 234, 212, 0.14), 0 12px 40px rgba(56, 189, 248, 0.1), 0 0 64px rgba(94, 234, 212, 0.05); --topbar-h: 64px; --status-h: 36px; --options-w: 300px; } html[data-theme="light"] { color-scheme: light; /* ── Light palette (exclusive depth) ── */ --bg-0: #eef3f9; --bg-1: #ffffff; --bg-2: #f1f5f9; --bg-3: #e2e8f0; --bg-elev: rgba(255, 255, 255, 0.92); --bg-glass: rgba(255, 255, 255, 0.78); --border: rgba(15, 23, 42, 0.1); --border-strong: rgba(15, 23, 42, 0.16); --text: #0b1220; --text-2: #334155; --text-3: #64748b; --accent: #0f766e; --accent-2: #0369a1; --accent-soft: rgba(15, 118, 110, 0.1); --accent-soft-2: rgba(3, 105, 161, 0.1); --danger: #e11d48; --danger-soft: rgba(225, 29, 72, 0.1); --ok: #16a34a; --ok-soft: rgba(22, 163, 74, 0.1); --warn: #d97706; --editor-bg: #fbfcfe; --chip-bg: rgba(15, 23, 42, 0.04); --scrollbar: rgba(100, 116, 139, 0.35); --grid-line: rgba(15, 23, 42, 0.045); --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.05); --shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.06), 0 20px 40px rgba(15, 23, 42, 0.05); --shadow-glow: 0 0 0 1px rgba(15, 118, 110, 0.12), 0 12px 36px rgba(2, 132, 199, 0.08), 0 24px 48px rgba(15, 23, 42, 0.06); } /* Primary CTA */ .btn-primary-gradient { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; } /* ═══════════════════════════════════════════════════════════ Surface polish — both themes (shared across verktyg.it tools) ═══════════════════════════════════════════════════════════ */ /* Light ambient */ html[data-theme="light"] .bg-glow { background: radial-gradient(1000px 520px at 12% -8%, rgba(15, 118, 110, 0.12), transparent 55%), radial-gradient(900px 480px at 92% 0%, rgba(3, 105, 161, 0.08), transparent 52%), radial-gradient(700px 400px at 50% 110%, rgba(109, 40, 217, 0.05), transparent 50%), linear-gradient(180deg, #f7f9fc 0%, #eef3f9 45%, #e8eef6 100%) !important; } /* Dark ambient — richer ember/cyan depth */ html[data-theme="dark"] .bg-glow { background: radial-gradient(1000px 540px at 10% -8%, rgba(94, 234, 212, 0.16), transparent 55%), radial-gradient(900px 500px at 92% 0%, rgba(56, 189, 248, 0.14), transparent 52%), radial-gradient(700px 420px at 50% 110%, rgba(167, 139, 250, 0.1), transparent 50%), radial-gradient(600px 360px at 70% 40%, rgba(94, 234, 212, 0.04), transparent 45%), linear-gradient(180deg, #0a0e18 0%, #06080f 50%, #05070d 100%) !important; } /* Topbar */ html[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 24px rgba(15, 23, 42, 0.045); } html[data-theme="dark"] .topbar { background: rgba(10, 16, 28, 0.78); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 28px rgba(0, 0, 0, 0.35); border-bottom-color: rgba(148, 163, 184, 0.12); } /* Cards / panels */ html[data-theme="light"] .card, html[data-theme="light"] .panel, html[data-theme="light"] .surface { background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%) !important; box-shadow: var(--shadow) !important; border-color: var(--border); } html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .surface { background: linear-gradient(165deg, #121a2a 0%, #0e1420 100%) !important; box-shadow: var(--shadow) !important; border-color: var(--border); } /* Chips / icon buttons */ html[data-theme="light"] .icon-btn, html[data-theme="light"] .lang-switch, html[data-theme="light"] .chip, html[data-theme="light"] .mode-btn, html[data-theme="light"] .preset-btn { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 8px rgba(15, 23, 42, 0.04); } html[data-theme="light"] .icon-btn { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); } html[data-theme="dark"] .icon-btn, html[data-theme="dark"] .lang-switch, html[data-theme="dark"] .chip, html[data-theme="dark"] .mode-btn, html[data-theme="dark"] .preset-btn { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 2px 10px rgba(0, 0, 0, 0.28); } html[data-theme="dark"] .icon-btn { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%); } /* CTA hover — full background so text stays readable */ html[data-theme="light"] .btn-primary:hover, html[data-theme="light"] .btn.primary:hover, html[data-theme="light"] a.btn-primary:hover { background: var(--accent) !important; color: #ffffff !important; border-color: var(--accent) !important; } html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn.primary:hover, html[data-theme="dark"] a.btn-primary:hover { background: var(--accent) !important; color: #0b0f19 !important; border-color: var(--accent) !important; box-shadow: 0 4px 18px rgba(94, 234, 212, 0.28) !important; } html[data-theme="light"] .btn-primary-gradient:hover { filter: brightness(1.05); color: #fff; } html[data-theme="dark"] .btn-primary-gradient:hover { filter: brightness(1.08); color: #0b0f19; box-shadow: 0 6px 22px rgba(94, 234, 212, 0.22); }