/* ══════════════════════════════════════════════════════════════
   PixoraCDN — Design Tokens
   Single source of truth for color/spacing/radius/shadow/motion.
   Loaded FIRST on every page, before any other stylesheet.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ── Background layers ── */
    --bg-0: #06060b;
    --bg-1: #0c0c14;
    --bg-2: #12121c;
    --bg-3: #1a1a27;
    --bg-4: #222233;

    /* ── Borders ── */
    --border: rgba(255, 255, 255, 0.06);
    --border-h: rgba(255, 255, 255, 0.12);

    /* ── Text ── */
    --text-1: #eeeef5;
    --text-2: #9898aa;
    --text-3: #55556a;
    /* back-compat aliases (admin.css referenced these without a definition) */
    --text: var(--text-1);
    --text-muted: var(--text-2);

    /* ── Brand / accent ── */
    --accent: #7c5cfc;
    --accent-dim: rgba(124, 92, 252, 0.12);
    --accent-hover: #6a4ae8;
    --accent-light: #a78bfa;

    /* ── Semantic ── */
    --green: #fdfefe;
    --green-dim: rgba(0, 214, 143, 0.12);
    --red: #ff4757;
    --red-dim: rgba(255, 71, 87, 0.1);
    --yellow: #feca57;
    --yellow-dim: rgba(254, 202, 87, 0.12);
    --blue: #4ea1ff;
    --blue-dim: rgba(78, 161, 255, 0.12);

    /* ── Spacing scale ── */
    --sp-1: 4px;
    --sp-2: 6px;
    --sp-3: 8px;
    --sp-4: 12px;
    --sp-5: 16px;
    --sp-6: 20px;
    --sp-7: 24px;
    --sp-8: 32px;
    --sp-9: 40px;
    --sp-10: 48px;
    --sp-11: 64px;

    /* ── Radius scale ── */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-2xl: 20px;
    --radius: var(--r-lg);
    /* back-compat alias, was hardcoded 10px */

    /* ── Elevation ── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .24), 0 0 0 1px rgba(255, 255, 255, .03) inset;
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .32), 0 0 0 1px rgba(255, 255, 255, .03) inset;
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, .44), 0 0 0 1px rgba(255, 255, 255, .04) inset;
    --shadow-focus: 0 0 0 3px var(--accent-dim);

    /* ── Motion ── */
    --dur-fast: 120ms;
    --dur-normal: 180ms;
    --dur-medium: 240ms;
    --dur-slow: 350ms;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* ── Typography ── */
    --font: 'DM Sans', -apple-system, sans-serif;
    --mono: 'JetBrains Mono', monospace;

    /* ── Z-index scale ── */
    --z-nav: 100;
    --z-dropdown: 500;
    --z-tooltip: 800;
    --z-modal: 1000;
    --z-toast: 2000;
}

@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;
    }
}

/* In-app override (Settings → General → Reduced Motion), independent of OS setting */
:root[data-reduced-motion="on"] *,
:root[data-reduced-motion="on"] *::before,
:root[data-reduced-motion="on"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}