/* ==========================================================================
   themes.css — Global design tokens + body foundation
   Neon Glass SaaS · FirstStepOnline
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Backgrounds ─────────────────────────────────────────────────────── */
  --bg-0:        #050810;           /* deepest body bg */
  --bg-1:        #090d1a;           /* page layer */
  --bg-2:        #0d1220;           /* slightly lifted surface */
  --panel:       rgba(13, 20, 38, 0.72);
  --panel-2:     rgba(18, 27, 50, 0.60);
  --panel-hover: rgba(22, 33, 58, 0.80);

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --border:      rgba(255, 255, 255, 0.08);
  --border-md:   rgba(255, 255, 255, 0.12);
  --border-hi:   rgba(255, 255, 255, 0.20);

  /* ── Text ────────────────────────────────────────────────────────────── */
  --text:        rgba(224, 232, 255, 0.92);
  --text-muted:  rgba(160, 180, 220, 0.65);
  --text-faint:  rgba(120, 145, 190, 0.45);

  /* ── Accents ─────────────────────────────────────────────────────────── */
  --accent-cyan:       #22d3ee;
  --accent-cyan-dim:   rgba(34, 211, 238, 0.18);
  --accent-cyan-edge:  rgba(34, 211, 238, 0.35);
  --accent-pink:       #f472b6;
  --accent-pink-dim:   rgba(244, 114, 182, 0.15);
  --accent-pink-edge:  rgba(244, 114, 182, 0.30);

  /* ── Shadows & Glows ─────────────────────────────────────────────────── */
  --shadow:       0 4px 24px rgba(0, 0, 0, 0.55),
                  0 1px 4px  rgba(0, 0, 0, 0.40);
  --shadow-lg:    0 8px 48px rgba(0, 0, 0, 0.70),
                  0 2px 8px  rgba(0, 0, 0, 0.50);
  --glow-cyan:    0 0 16px rgba(34, 211, 238, 0.25),
                  0 0 40px rgba(34, 211, 238, 0.10);
  --glow-pink:    0 0 16px rgba(244, 114, 182, 0.22),
                  0 0 40px rgba(244, 114, 182, 0.08);
  --glow-btn:     0 2px 12px rgba(34, 211, 238, 0.30),
                  0 0  28px rgba(34, 211, 238, 0.12);

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-body:  'DM Sans', system-ui, sans-serif;
  --font-mono:  'DM Mono', 'Fira Code', monospace;

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 180ms var(--ease);
}

/* ── Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg-0);
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 0%,   rgba(34, 211, 238, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%,  rgba(244, 114, 182, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 100% 100% at 50% 50%, var(--bg-1) 0%, var(--bg-0) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; }
::-webkit-scrollbar-track        { background: var(--bg-0); }
::-webkit-scrollbar-thumb        { background: rgba(255,255,255,0.10); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(255,255,255,0.18); }

/* ── Selection ───────────────────────────────────────────────────────────── */
::selection {
  background: var(--accent-cyan-dim);
  color: var(--text);
}

/* ── Focus ring ──────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Utility typography tokens ───────────────────────────────────────────── */
.subtle   { color: var(--text-muted); }
.faint    { color: var(--text-faint); }
.sr-only  {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}