/* =========================== THEME TOKENS (Light / Dark) Usage: or "dark" theme.js shu atributni almashtiradi. =========================== */ :root{ /* Typography */ --font: system-ui, -apple-system, Segoe UI, Roboto, Arial; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Layout */ --radius: 16px; --radius-sm: 12px; --shadow: 0 18px 55px rgba(0,0,0,.12); --shadow-strong: 0 26px 70px rgba(0,0,0,.18); --border-w: 1px; /* Motion */ --ease: cubic-bezier(.2,.8,.2,1); --dur: .16s; --dur2: .26s; /* Brand */ --accent: #2563eb; --ok: #16a34a; --danger: #ef4444; --warn: #f59e0b; /* Semantic */ --ring: rgba(37,99,235,.35); } /* ---------- LIGHT (default) ---------- */ :root, html[data-theme="light"]{ color-scheme: light; --bg: #f3f5f9; --bg2: #eef2ff; --panel: rgba(255,255,255,.92); --panel2: rgba(255,255,255,.72); --text: #0f172a; --muted: rgba(15,23,42,.70); --muted2: rgba(15,23,42,.55); --border: rgba(15,23,42,.10); --input-bg: rgba(255,255,255,.95); --input-bg2: rgba(255,255,255,.70); --shadow: 0 18px 55px rgba(2,6,23,.10); --shadow-strong: 0 26px 70px rgba(2,6,23,.14); /* extra tokens */ --surface: rgba(255,255,255,.80); --surface2: rgba(255,255,255,.60); } /* ---------- DARK ---------- */ html[data-theme="dark"]{ color-scheme: dark; --bg: #0b1220; --bg2: rgba(37,99,235,.12); /* Make UI more readable over matrix background */ --panel: rgba(9, 14, 26, .88); --panel2: rgba(9, 14, 26, .72); --text: #eaf0ff; --muted: rgba(234,240,255,.70); --muted2: rgba(234,240,255,.55); --border: rgba(255,255,255,.12); --input-bg: rgba(6, 10, 20, .84); --input-bg2: rgba(6, 10, 20, .62); --ring: rgba(122,162,255,.40); --shadow: 0 20px 60px rgba(0,0,0,.35); --shadow-strong: 0 30px 80px rgba(0,0,0,.45); /* extra tokens */ --surface: rgba(6, 10, 20, .56); --surface2: rgba(6, 10, 20, .42); } /* Smooth theme transition */ html, body{ transition: background-color var(--dur2) var(--ease), color var(--dur2) var(--ease); }