/* ============================================================ بصماتي suite — design tokens (DARK default) + base + button system Dark is default; add class .light on to switch. ص = --sh-am (#F4A23C orange) · م = --sh-pm (#5773FF blue) — IMMUTABLE. ============================================================ */ @property --ang { syntax: ''; inherits: false; initial-value: 0deg; } :root { /* brand */ --orange:#F5853A; --orange-2:#FFB174; --orange-deep:#DC6A1B; --blue:#5A8BF0; --blue-2:#88B0F7; --cyan:#46C7E2; /* shift colors — NEVER swap */ --sh-am:#F4A23C; --sh-pm:#5773FF; --day:#F4A23C; --day-d:#D9831C; --night:#5773FF; --night-d:#3C53D6; --day-soft:#3a2a14; --day-ink:#FFD9A8; --night-soft:#1b2348; --night-ink:#C9D3FF; /* surfaces (dark) */ --bg:#070A12; --bg-2:#0B0F1C; --panel:rgba(18,24,40,.7); --panel-2:rgba(13,18,31,.86); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05); --fg:#EEF1F8; --fg-soft:#A4ADC2; --fg-mute:#6C7589; --chip:rgba(255,255,255,.05); --glow-o:rgba(245,133,58,.32); --glow-b:rgba(90,139,240,.3); --shadow:0 1px 2px rgba(0,0,0,.4),0 30px 70px -30px rgba(0,0,0,.85); /* status */ --ok:#16B981; --bad:#F2453D; --warn:#F59E0B; /* radius / ring / motion */ --r:18px; --r-sm:12px; --r-lg:24px; --r-pill:999px; --ring:0 0 0 4px rgba(245,133,58,.22); --ease:cubic-bezier(.2,.8,.2,1); --ease-snap:cubic-bezier(.34,1.56,.64,1); --tex:.55; --spot:.7; } :root.light { --bg:#F4F3EF; --bg-2:#FAF9F5; --panel:rgba(255,255,255,.78); --panel-2:rgba(255,255,255,.92); --line:rgba(16,22,40,.09); --line-2:rgba(16,22,40,.055); --fg:#111726; --fg-soft:#48526A; --fg-mute:#8A93A6; --chip:rgba(16,22,40,.035); --day-soft:#FFF3E0; --day-ink:#A35B07; --night-soft:#ECEFFF; --night-ink:#2B3BB0; --glow-o:rgba(245,133,58,.22); --glow-b:rgba(90,139,240,.18); --shadow:0 1px 2px rgba(16,22,40,.05),0 34px 70px -32px rgba(16,22,40,.26); --tex:0; --spot:0; } * { margin:0; padding:0; box-sizing:border-box; } ::selection { background:var(--orange); color:#fff; } html { scroll-behavior:smooth; } body { font-family:"IBM Plex Sans Arabic", system-ui, sans-serif; background:var(--bg); color:var(--fg); min-height:100vh; -webkit-font-smoothing:antialiased; transition:background .5s var(--ease), color .5s var(--ease); } h1,h2,h3,.head { font-family:"Reem Kufi", system-ui, sans-serif; } ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:var(--line); border-radius:20px; border:3px solid transparent; background-clip:padding-box; } /* ── shared button system ───────────────────────────────────────────── */ .btn { font-family:inherit; font-weight:600; font-size:15px; border:none; cursor:pointer; border-radius:13px; padding:12px 22px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:9px; white-space:nowrap; position:relative; overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), opacity .2s; } .btn-primary { color:#fff; background:linear-gradient(135deg,var(--orange),var(--orange-deep)); box-shadow:0 10px 26px -12px var(--glow-o), inset 0 1px 0 rgba(255,255,255,.22); } .btn-primary:hover { box-shadow:0 18px 38px -12px var(--glow-o), inset 0 1px 0 rgba(255,255,255,.3); } .btn-ghost { color:var(--fg); background:var(--chip); border:1px solid var(--line); } .btn-ghost:hover { border-color:var(--fg-soft); transform:translateY(-2px); } .btn-lg { padding:15px 28px; font-size:16.5px; border-radius:14px; } .btn:active { transform:scale(.96); } .btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; } /* ── chip / pill ────────────────────────────────────────────────────── */ .icon-btn { width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--chip); color:var(--fg); cursor:pointer; display:grid; place-items:center; transition:.25s var(--ease); } .icon-btn:hover { border-color:var(--orange); color:var(--orange); transform:translateY(-1px); } .icon-btn svg { width:19px; height:19px; } @media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }