/* ══════════════════════════════════════════════════
   Design Tokens — Single source of truth for theming
   ══════════════════════════════════════════════════ */

:root {
    /* ── Surface / Background ───────────────────── */
    --bg-primary: #07071a;
    --bg-secondary: #0e0e2a;
    --bg-card: rgba(255, 255, 255, 0.035);
    --bg-card-hover: rgba(255, 255, 255, 0.06);
    --bg-input: rgba(255, 255, 255, 0.055);
    --bg-input-focus: rgba(255, 255, 255, 0.08);

    /* ── Borders ────────────────────────────────── */
    --border-card: rgba(255, 255, 255, 0.08);
    --border-input: rgba(255, 255, 255, 0.12);
    --border-focus: var(--accent);

    /* ── Text ───────────────────────────────────── */
    --text-primary: #f0f0f5;
    --text-secondary: #9a9ab0;
    --text-muted: rgba(255, 255, 255, 0.25);

    /* ── Accent palette ─────────────────────────── */
    --accent: #7c5cfc;
    --accent-rgb: 124, 92, 252;
    --accent-glow: rgba(124, 92, 252, 0.35);
    --accent-hover: #9b80fd;
    --accent-gradient: linear-gradient(135deg, var(--accent), #9b80fd);

    /* ── Semantic colors ─────────────────────────── */
    --success: #34d399;
    --success-bg: rgba(52, 211, 153, 0.12);
    --error: #f87171;
    --error-bg: rgba(248, 113, 113, 0.12);
    --warning: #fbbf24;
    --info: #60a5fa;

    /* ── Typography ──────────────────────────────── */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-size-xs: 0.72rem;
    --font-size-sm: 0.82rem;
    --font-size-base: 0.88rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.65rem;
    --font-size-2xl: 2rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* ── Spacing ─────────────────────────────────── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 40px;
    --space-4xl: 48px;

    /* ── Radii ───────────────────────────────────── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────── */
    --shadow-card: 0 8px 60px rgba(0, 0, 0, 0.45), 0 0 80px var(--accent-glow);
    --shadow-button: 0 4px 20px var(--accent-glow);
    --shadow-button-hover: 0 6px 32px var(--accent-glow);
    --shadow-qr: 0 4px 24px rgba(124, 92, 252, 0.18);

    /* ── Transitions ─────────────────────────────── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-smooth: 0.3s cubic-bezier(0.22, 1, 0.36, 1);

    /* ── Z-Index layers ──────────────────────────── */
    --z-background: 0;
    --z-card: 1;
    --z-dropdown: 10;
    --z-modal: 50;
    --z-toast: 100;
}