/* ════════════════════════════════════════════ DOMMAX — Theme tokens, base & typography Light / Dark via [data-theme] on ════════════════════════════════════════════ */ /* ── RESET ── */ *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} *::before,*::after{box-sizing:border-box} /* ════════════ DARK (default) ════════════ */ :root, :root[data-theme="dark"]{ color-scheme:dark; /* surfaces */ --bg:#0A0E16; --bg-grad-1:#0E1626; --bg-grad-2:#090D15; --surface-1:#121826; --surface-2:#171F2F; --surface-3:#1D2738; --surface-hover:rgba(255,255,255,.035); /* borders */ --border:#212B3C; --border-strong:#2C3850; --border-faint:#1A2230; /* text */ --text-1:#EAF0FA; --text-2:#94A3BD; --text-3:#5C6A85; --text-4:#3A4760; /* accent — blue */ --accent:#4C82F7; --accent-hover:#6B97F9; --accent-press:#3A6FE0; --accent-soft:rgba(76,130,247,.13); --accent-line:rgba(76,130,247,.30); --accent-text:#9CC0FF; --on-accent:#FFFFFF; /* semantic */ --ok:#2FCB86; --ok-soft:rgba(47,203,134,.13); --ok-line:rgba(47,203,134,.28); --ok-text:#6FE9AF; --warn:#F0A93B; --warn-soft:rgba(240,169,59,.13); --warn-line:rgba(240,169,59,.28); --warn-text:#FFCC79; --danger:#EF5070; --danger-soft:rgba(239,80,112,.13); --danger-line:rgba(239,80,112,.30); --danger-text:#FF93AC; --grape:#9A6BE0; --grape-soft:rgba(154,107,224,.13); --grape-line:rgba(154,107,224,.28); --grape-text:#C2A4F2; /* hero gradients */ --hero-from:#13284C; --hero-to:#0A1426; --hero-glow:rgba(76,130,247,.22); --master-from:#0C2418; --master-to:#0A140E; /* elevation */ --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 24px rgba(0,0,0,.45); --shadow-lg:0 40px 90px rgba(0,0,0,.65); --shadow-phone:0 0 0 1px rgba(255,255,255,.03),0 50px 110px rgba(0,0,0,.7); /* radii */ --r-xl:22px; --r-lg:16px; --r-md:12px; --r-sm:9px; --r-pill:999px; /* fonts */ --sans:'Onest',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; } /* ════════════ LIGHT ════════════ */ :root[data-theme="light"]{ color-scheme:light; --bg:#F4F6FB; --bg-grad-1:#EEF2FA; --bg-grad-2:#F6F8FC; --surface-1:#FFFFFF; --surface-2:#FBFCFE; --surface-3:#EFF3F9; --surface-hover:rgba(16,40,90,.035); --border:#E7ECF4; --border-strong:#D7DEEA; --border-faint:#EEF1F7; --text-1:#0F172A; --text-2:#56627C; --text-3:#8B97AE; --text-4:#B4BECE; --accent:#2D6EF5; --accent-hover:#1E5FE6; --accent-press:#1A55D4; --accent-soft:rgba(45,110,245,.09); --accent-line:rgba(45,110,245,.22); --accent-text:#1F5BD8; --on-accent:#FFFFFF; --ok:#13A968; --ok-soft:rgba(19,169,104,.10); --ok-line:rgba(19,169,104,.24); --ok-text:#0F8A55; --warn:#E08A0B; --warn-soft:rgba(224,138,11,.10); --warn-line:rgba(224,138,11,.26); --warn-text:#B36E07; --danger:#E13B62; --danger-soft:rgba(225,59,98,.09); --danger-line:rgba(225,59,98,.24); --danger-text:#C32B4F; --grape:#7E4FD0; --grape-soft:rgba(126,79,208,.10); --grape-line:rgba(126,79,208,.24); --grape-text:#6A3CC0; --hero-from:#1E4FB5; --hero-to:#2D6EF5; --hero-glow:rgba(255,255,255,.22); --master-from:#0E7A4E; --master-to:#13A968; --shadow-sm:0 1px 2px rgba(16,30,60,.06),0 1px 3px rgba(16,30,60,.04); --shadow-md:0 6px 18px rgba(16,30,60,.08),0 2px 6px rgba(16,30,60,.05); --shadow-lg:0 30px 70px rgba(16,30,60,.16),0 8px 20px rgba(16,30,60,.08); --shadow-phone:0 0 0 1px rgba(16,30,60,.05),0 40px 90px rgba(16,30,60,.20); } /* ── BASE ── */ html,body{height:100%} body{ background:var(--bg); color:var(--text-1); font-family:var(--sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; transition:background .4s ease,color .4s ease; } /* smooth theme transition on common surfaces */ .tt{transition:background-color .4s ease,border-color .4s ease,color .4s ease,box-shadow .4s ease} h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.15} /* display utility — Onest tightened, replaces Unbounded */ .display{font-weight:800;letter-spacing:-.035em;line-height:1.05} .num{font-family:var(--mono);font-feature-settings:"tnum" 1;letter-spacing:-.01em} ::selection{background:var(--accent-soft);color:var(--text-1)} /* scrollbars */ .noscroll::-webkit-scrollbar{display:none} .noscroll{scrollbar-width:none} /* icon helper */ .ic{width:1em;height:1em;flex-shrink:0;stroke:currentColor;fill:none; stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-0.125em} .ic-fill{fill:currentColor;stroke:none}