/* Astral VPN — shared design tokens (etap 2 of the 2026-09 audit).
 *
 * Single source of truth for colour, spacing, radii, shadow and stacking
 * order across all three web surfaces: the landing (services/landing_sections.py),
 * the cabinet /sub/{token} (static/style.css) and the Telegram Mini App
 * (static/miniapp.css).
 *
 * Deliberate scope limits:
 *   - The values below are the ones already in use, extracted verbatim. This
 *     file introduces the vocabulary; it does not restyle anything. Migrating
 *     the remaining hex literals happens block by block so every visual diff
 *     stays reviewable (audit note 14: do not change all 79 colours at once).
 *   - `--accent` stays the de-facto violet (#7c3aed), not the logo blue. The
 *     logo blue is exposed as `--brand-blue` so switching the accent over is a
 *     separate, visible decision rather than a side effect of tokenisation.
 *   - No new dependencies, no @import — this is linked directly in each <head>.
 */

:root {
  /* ── Surfaces ── */
  --bg: #070b14;
  --surface: rgba(20, 27, 45, 0.72);
  --surface-veil: rgba(20, 27, 45, 0.5);
  --surface-sunken: rgba(15, 23, 42, 0.5);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(148, 163, 184, 0.2);

  /* ── Text ── */
  --text: #e2e8f0;
  --text-bright: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #475569;
  --text-on-accent: #fff;

  /* ── Accents ── */
  --accent: #7c3aed;
  --accent-deep: #6d28d9;
  --accent-soft: #a78bfa;
  --accent-pale: #c4b5fd;
  --accent-2: #22d3ee;
  --accent-2-deep: #06b6d4;
  --accent-2-soft: #67e8f9;
  /* Logo blue. Not wired into --accent yet: see the header note. */
  --brand-blue: #633cff;

  /* ── Status ── */
  --ok: #22c55e;
  --ok-deep: #059669;
  --warn: #f59e0b;
  --warn-soft: #fbbf24;
  --danger: #ef4444;
  --danger-soft: #f87171;
  --tg: #2ea6ff;

  /* ── Spacing scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ── Radii ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* ── Elevation ── */
  --shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
  --shadow-lg: 0 8px 28px rgba(124, 58, 237, 0.45);

  /* ── Stacking order ──
   * Replaces the ad-hoc 99998/99999 pairs that made "which overlay wins"
   * unanswerable without grepping. Toasts sit above modals on purpose: a
   * toast is feedback about the action the modal just triggered. */
  --z-base: 1;
  --z-sticky: 40;
  --z-modal: 900;
  --z-toast: 1000;

  /* ── Controls ──
   * 44px is the minimum comfortable touch target; every interactive control
   * in the button API below is sized against it. */
  --tap-min: 44px;
  --focus-ring: 2px solid var(--accent-2-soft);
  --focus-ring-offset: 2px;
}

/* ── Focus visibility ────────────────────────────────────────────────
 * Neither style.css nor landing_sections.py had a single :focus-visible
 * rule, so keyboard users had no reliable indicator anywhere outside the
 * Mini App. This is the shared baseline; surfaces may tighten it, not
 * remove it. :focus-visible (not :focus) keeps mouse clicks unchanged. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--r-sm);
}

/* ── Reduced motion ──
 * The cabinet and landing lean on shimmer/glow keyframes for primary
 * actions. Honour the OS preference instead of animating regardless. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}