/*
 * IwPlay visual system
 *
 * This file is the single source of truth for the visual language shared by
 * Arcade, Platform, Store, account and launcher surfaces. Feature styles may
 * compose these tokens, but they should not redefine the palette, type scale,
 * spacing scale, radii or interaction states.
 */

:root {
    color-scheme: dark;

    /* Brand palette */
    --iw-bg: #0a0e1a;
    --iw-surface: #141b2a;
    --iw-surface-raised: #1a2236;
    --iw-surface-strong: #202a42;
    --iw-text: #ffffff;
    --iw-text-secondary: #a0afc8;
    --iw-text-muted: #7a8fa6;
    --iw-border: rgba(157, 169, 186, 0.16);
    --iw-border-soft: rgba(157, 169, 186, 0.08);
    --iw-accent: #00f5ff;
    --iw-accent-strong: #00c7d6;
    --iw-accent-secondary: #9d4edd;
    --iw-accent-pink: #ff006e;
    --iw-accent-gold: #ffd60a;
    --iw-accent-success: #00d084;
    --iw-accent-warning: #ff8c00;
    --iw-accent-danger: #ff4757;

    /* Typography */
    --iw-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --iw-font-display: 'Rajdhani', 'Inter', system-ui, sans-serif;
    --iw-text-xs: 0.75rem;
    --iw-text-sm: 0.8125rem;
    --iw-text-base: 1rem;
    --iw-text-lg: 1.125rem;
    --iw-text-xl: 1.5rem;
    --iw-text-2xl: 2rem;

    /* 4px base spacing scale */
    --iw-space-1: 0.25rem;
    --iw-space-2: 0.5rem;
    --iw-space-3: 0.75rem;
    --iw-space-4: 1rem;
    --iw-space-5: 1.25rem;
    --iw-space-6: 1.5rem;
    --iw-space-8: 2rem;
    --iw-space-10: 2.5rem;
    --iw-space-12: 3rem;

    /* Shape and depth */
    --iw-radius-sm: 0.5rem;
    --iw-radius-md: 0.75rem;
    --iw-radius-lg: 1rem;
    --iw-radius-xl: 1.25rem;
    --iw-radius-pill: 999px;
    --iw-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --iw-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
    --iw-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.28);
    --iw-motion-fast: 150ms ease;
    --iw-motion-base: 220ms ease;
    --iw-motion-slow: 320ms ease;

    /* Compatibility aliases. New feature CSS should use --iw-* tokens. */
    --color-bg-dark: var(--iw-bg);
    --color-bg-card: var(--iw-surface);
    --color-bg-elevated: var(--iw-surface-raised);
    --color-text-primary: var(--iw-text);
    --color-text-secondary: var(--iw-text-secondary);
    --color-text-muted: var(--iw-text-muted);
    --color-accent-cyan: var(--iw-accent);
    --color-accent-purple: var(--iw-accent-secondary);
    --color-accent-pink: var(--iw-accent-pink);
    --color-accent-gold: var(--iw-accent-gold);
    --color-accent-green: var(--iw-accent-success);
    --color-accent-orange: var(--iw-accent-warning);
    --color-accent-red: var(--iw-accent-danger);
    --color-border: var(--iw-border);
    --color-border-soft: var(--iw-border-soft);
    --accent-cyan: var(--iw-accent);
    --accent-purple: var(--iw-accent-secondary);
    --accent-pink: var(--iw-accent-pink);
    --accent-gold: var(--iw-accent-gold);
    --accent-green: var(--iw-accent-success);
    --text-primary: var(--iw-text);
    --text-secondary: var(--iw-text-secondary);
    --text-muted: var(--iw-text-muted);
    --bg: var(--iw-bg);
    --panel: var(--iw-surface);
    --line: var(--iw-border);
    --text: var(--iw-text);
    --accent: var(--iw-accent);
}

/* Shared primitives used by every surface. */
.iw-surface {
    background: var(--iw-surface);
    border: 1px solid var(--iw-border);
    border-radius: var(--iw-radius-lg);
    box-shadow: var(--iw-shadow-sm);
}

.iw-stack {
    display: grid;
    gap: var(--iw-space-4);
}

.iw-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--iw-space-3);
}

.iw-muted {
    color: var(--iw-text-muted);
}

/* One keyboard-visible focus treatment across all products. */
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--iw-accent) 55%, transparent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Ring loader — UI Ball/LDRS style, CSS-only, CSP-safe. */
.iw-loader {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid color-mix(in srgb, var(--iw-accent) 20%, transparent);
    border-top-color: var(--iw-accent);
    border-radius: var(--iw-radius-pill);
    animation: iw-loader-spin 0.8s linear infinite;
}

@keyframes iw-loader-spin {
    to { transform: rotate(360deg); }
}