/* ============================================================
   CodeAugs — variables.css
   Design tokens: colours, typography, spacing, radii, shadows
   ============================================================ */
:root{
  /* Brand */
  --primary:#00E5FF;
  --accent:#7C4DFF;
  --bg:#0B0F19;
  --secondary:#A7B0C0;
  --white:#FFFFFF;

  /* Surfaces */
  --surface:#111726;
  --surface-2:#151C2E;
  --glass:rgba(255,255,255,.045);
  --glass-strong:rgba(255,255,255,.1);
  --border:rgba(167,176,192,.16);
  --border-strong:rgba(0,229,255,.35);
  --surface-3:rgba(255,255,255,.04);

  /* Text */
  --text:#EAF0F7;
  --muted:#A7B0C0;
  --dim:#7E8798;

  /* Gradients */
  --grad:linear-gradient(135deg,#00E5FF 0%,#7C4DFF 100%);
  --grad-soft:linear-gradient(135deg,rgba(0,229,255,.16),rgba(124,77,255,.16));
  --grad-text:linear-gradient(100deg,#00E5FF 10%,#8BE9FF 40%,#7C4DFF 90%);
  --glow:0 0 0 1px rgba(0,229,255,.25),0 12px 40px -12px rgba(0,229,255,.35);

  /* Shadows */
  --shadow:0 12px 32px -16px rgba(0,0,0,.75);
  --shadow-soft:0 14px 42px -20px rgba(0,0,0,.55);
  --shadow-lg:0 32px 70px -30px rgba(0,0,0,.85);
  --shadow-card:0 24px 58px -30px rgba(0,0,0,.55);

  /* Shape & rhythm */
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-pill:999px;
  --container:1240px;
  --container-wide:1560px;
  --nav-h:72px;
  --utility-h:44px;
  --section-y:clamp(3rem,6vw,6.5rem);

  /* Type */
  --font-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.18s var(--ease);
  --t:.3s var(--ease);

  /* Small refinements */
  --glass-opacity:0.045;
  --glass-strong-opacity:0.10;
  --card-padding:1.75rem;
  --card-radius:var(--radius-lg);
  --img-radius:12px;
  --btn-transition:.22s var(--ease);
  --btn-disabled:rgba(167,176,192,.12);
}

:root[data-color-scheme="light"],
@media (prefers-color-scheme: light){
  :root:not([data-color-scheme]),
  :root[data-color-scheme="system"] {
    --bg:#F7F9FF;
    --surface:#FFFFFF;
    --surface-2:#F4F7FF;
    --surface-3:#EFF3FF;
    --glass:rgba(255,255,255,.84);
    --glass-strong:rgba(255,255,255,.94);
    --border:rgba(15,23,42,.12);
    --border-strong:rgba(0,229,255,.35);
    --text:#111827;
    --muted:#475569;
    --dim:#64748B;
    --grad-text:linear-gradient(100deg,#0FB4FF 10%,#71D7FF 40%,#7C4DFF 90%);
    --shadow:0 12px 32px -16px rgba(15,23,42,.12);
    --shadow-soft:0 14px 42px -20px rgba(15,23,42,.12);
    --shadow-lg:0 32px 70px -30px rgba(15,23,42,.14);
    --shadow-card:0 24px 58px -30px rgba(15,23,42,.16);
  }
}

:root[data-color-scheme="dark"]{
  color-scheme: dark;
}

:root[data-color-scheme="light"]{
  color-scheme: light;
}

:root[data-color-scheme="system"]{
  color-scheme: light dark;
}