/* ════════════════════════════════════════════════════════════════════════════
   VEYRAXCEL — SHARED DESIGN SYSTEM  (loaded on every page, before page styles)
   ────────────────────────────────────────────────────────────────────────────
   One source of truth for tokens + base polish + reusable components so the
   whole platform feels consistent and premium. Loaded FIRST so any page's own
   inline <style> always wins on conflict — this layer only fills the gaps and
   adds universal polish (focus rings, scrollbars, selection, smoothing, motion,
   form focus, native control theming). Brand cyan = #00d4ff, purple = #a855f7.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens (namespaced --ds-* so they never collide with page vars) ── */
:root{
  /* spacing scale */
  --ds-1:.25rem; --ds-2:.5rem; --ds-3:.75rem; --ds-4:1rem; --ds-5:1.5rem; --ds-6:2rem; --ds-8:3rem;
  /* radius scale */
  --ds-r-sm:8px; --ds-r:12px; --ds-r-lg:16px; --ds-r-xl:22px; --ds-r-pill:100px;
  /* elevation */
  --ds-shadow-sm:0 1px 3px rgba(0,0,0,.28);
  --ds-shadow:0 10px 30px rgba(0,0,0,.30);
  --ds-shadow-lg:0 22px 56px rgba(0,0,0,.42);
  /* motion */
  --ds-ease:cubic-bezier(.4,0,.2,1);
  --ds-fast:.15s; --ds-med:.25s;
  /* brand (falls back if a page hasn't defined --c/--p) */
  --ds-cyan:#00d4ff; --ds-purple:#a855f7; --ds-pink:#ec4899;
  /* native UI renders dark across the whole platform */
  color-scheme:dark;
  accent-color:var(--c, var(--ds-cyan));
}

/* ── Universal base polish (safe everywhere) ───────────────────────────────── */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
*{ -webkit-tap-highlight-color:transparent; }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

/* Accessible, on-brand keyboard focus ring (one consistent treatment site-wide) */
:focus-visible{ outline:2px solid var(--c, var(--ds-cyan)); outline-offset:2px; }
:focus:not(:focus-visible){ outline:none; }

/* On-brand text selection */
::selection{ background:var(--c, var(--ds-cyan)); color:#001016; }
::-moz-selection{ background:var(--c, var(--ds-cyan)); color:#001016; }

/* Interactive affordances */
button{ cursor:pointer; }
button:disabled, [type=button]:disabled, [type=submit]:disabled, [aria-disabled=true], .is-disabled{ cursor:not-allowed; }

/* Inputs: a single, gentle, on-brand focus ring (page styles still win on conflict) */
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:none;
  border-color:var(--c, var(--ds-cyan));
  box-shadow:0 0 0 3px rgba(0,212,255,.26);
}
/* Kill the ugly opaque autofill box on dark forms */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.04) inset;
  caret-color:#fff;
  transition:background-color 9999s ease-out 0s;
}
::placeholder{ opacity:.6; }

/* Smoother headline/paragraph wrapping where supported (progressive, harmless) */
h1,h2,h3,h4{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* Premium, subtle scrollbars */
@supports (scrollbar-width: thin){
  html{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
}
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:100px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.30); background-clip:content-box; }

/* ── Opt-in component utilities (use by adding the class; never auto-applied) ─ */
.ds-card{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--ds-r-lg);
  padding:var(--ds-5);
  box-shadow:var(--ds-shadow-sm);
}
.ds-stack{ display:flex; flex-direction:column; gap:var(--ds-4); }
.ds-row{ display:flex; align-items:center; gap:var(--ds-3); }

.ds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:inherit; font-weight:700; font-size:.9rem; line-height:1;
  padding:.72rem 1.25rem; border-radius:var(--ds-r-sm); border:1px solid transparent;
  cursor:pointer; transition:transform var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease), background var(--ds-fast), opacity var(--ds-fast);
}
.ds-btn:hover{ transform:translateY(-1px); }
.ds-btn:active{ transform:translateY(0); }
.ds-btn-primary{ background:linear-gradient(135deg,var(--c, var(--ds-cyan)),var(--p, var(--ds-purple))); color:#00121a; }
.ds-btn-primary:hover{ box-shadow:0 10px 28px rgba(0,212,255,.28); }
.ds-btn-ghost{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:inherit; }
.ds-btn-ghost:hover{ background:rgba(255,255,255,.10); }
.ds-btn:disabled{ opacity:.55; transform:none; }

.ds-input{
  width:100%; box-sizing:border-box; font:inherit; color:inherit;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--ds-r-sm); padding:.72rem .85rem;
  transition:border-color var(--ds-fast), box-shadow var(--ds-fast);
}
.ds-input:focus{ outline:none; border-color:var(--c, var(--ds-cyan)); box-shadow:0 0 0 3px rgba(0,212,255,.26); }

.ds-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:.2rem .6rem; border-radius:var(--ds-r-pill);
  border:1px solid rgba(255,255,255,.16); color:inherit;
}

/* spacing helpers */
.ds-mt-4{ margin-top:var(--ds-4); } .ds-mt-6{ margin-top:var(--ds-6); }
.ds-gap-4{ gap:var(--ds-4); }