/* ============================================================
   DESIGN TOKENS – yopmail.ru
   ============================================================ */

:root {

  /* ── Background layers ─────────────────────────────────── */
  --bg:           #08090d;
  --bg-2:         #0c0f14;
  --surface:      #10131a;
  --surface-2:    #141820;
  --card:         #181d28;
  --card-hover:   #1c2130;
  --overlay:      rgba(8, 9, 13, 0.85);

  /* ── Borders ───────────────────────────────────────────── */
  --border:       #1e2538;
  --border-2:     #252e40;
  --border-light: #2d3650;

  /* ── Text ──────────────────────────────────────────────── */
  --text:         #edf2ff;
  --text-2:       #c4ceea;
  --muted:        #8896b3;
  --muted-2:      #5a6680;

  /* ── Accent blue ───────────────────────────────────────── */
  --accent:       #4da3ff;
  --accent-dim:   rgba(77, 163, 255, 0.12);
  --accent-glow:  rgba(77, 163, 255, 0.22);
  --accent-hover: #72b8ff;

  /* ── Accent green ──────────────────────────────────────── */
  --green:        #7ee787;
  --green-dim:    rgba(126, 231, 135, 0.1);
  --green-glow:   rgba(126, 231, 135, 0.18);

  /* ── Accent purple ─────────────────────────────────────── */
  --purple:       #c084fc;
  --purple-dim:   rgba(192, 132, 252, 0.1);

  /* ── Status ────────────────────────────────────────────── */
  --warn:         #fbbf24;
  --warn-dim:     rgba(251, 191, 36, 0.12);
  --danger:       #f87171;
  --danger-dim:   rgba(248, 113, 113, 0.1);
  --success:      #34d399;
  --success-dim:  rgba(52, 211, 153, 0.1);

  /* ── Gradients ─────────────────────────────────────────── */
  --grad-primary:  linear-gradient(135deg, #4da3ff 0%, #7ee787 100%);
  --grad-purple:   linear-gradient(135deg, #c084fc 0%, #4da3ff 100%);
  --grad-warm:     linear-gradient(135deg, #fbbf24 0%, #f87171 100%);
  --grad-text:     linear-gradient(135deg, #4da3ff 20%, #7ee787 80%);
  --grad-card:     linear-gradient(135deg,
                    rgba(77, 163, 255, 0.06) 0%,
                    rgba(126, 231, 135, 0.03) 100%);
  --grad-hero:     radial-gradient(ellipse 80% 60% at 50% -10%,
                    rgba(77, 163, 255, 0.14) 0%,
                    transparent 70%);
  --grad-glow-card: radial-gradient(circle at 50% 0%,
                    rgba(77, 163, 255, 0.1) 0%,
                    transparent 60%);

  /* ── Spacing ───────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ── Container ─────────────────────────────────────────── */
  --container:     1200px;
  --container-sm:  720px;
  --container-md:  960px;
  --gap:           24px;

  /* ── Border radius ─────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r:     16px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 40px;
  --r-full: 9999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-xs:  0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-sm:  0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow:     0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 40px 100px rgba(0, 0, 0, 0.65);
  --glow-accent: 0 0 40px rgba(77, 163, 255, 0.2),
                 0 0 80px rgba(77, 163, 255, 0.08);
  --glow-green:  0 0 40px rgba(126, 231, 135, 0.15),
                 0 0 80px rgba(126, 231, 135, 0.06);

  /* ── Typography ────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --fs-xs:   0.75rem;      /* 12px */
  --fs-sm:   0.8125rem;    /* 13px */
  --fs-base: 1rem;         /* 16px */
  --fs-lg:   1.125rem;     /* 18px */
  --fs-xl:   1.25rem;      /* 20px */
  --fs-2xl:  1.5rem;       /* 24px */
  --fs-3xl:  1.875rem;     /* 30px */
  --fs-4xl:  2.25rem;      /* 36px */
  --fs-5xl:  3rem;         /* 48px */
  --fs-6xl:  3.75rem;      /* 60px */
  --fs-7xl:  4.75rem;      /* 76px */

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-base:   1.6;
  --lh-relaxed:1.75;

  /* ── Transitions ───────────────────────────────────────── */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:    cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --dur-fast:   150ms;
  --dur:        220ms;
  --dur-md:     350ms;
  --dur-lg:     500ms;
  --dur-xl:     800ms;

  /* ── Z-index ───────────────────────────────────────────── */
  --z-under:   -1;
  --z-base:     0;
  --z-above:    1;
  --z-sticky:  50;
  --z-header: 100;
  --z-modal:  200;
  --z-toast:  300;
}