/**
 * UI Stack — design tokens (MPK member area)
 * Spacing: 8px grid | Colors: 60-30-10 | Type: 1.25 scale
 */

:root {
    /* Brand (legacy aliases) */
    --mpk-dark: #0f172a;
    --mpk-darker: #020617;
    --mpk-blue: #1e3a8a;
    --mpk-blue-light: #3b82f6;
    --mpk-gold: #ffd700;
    --mpk-gold-dark: #b8860b;
    --mpk-gold-light: #ffed4e;
    --mpk-green: #10b981;
    --mpk-red: #ef4444;
    --app-max-width: 430px;
    --catalog-max-width: 1400px;

    /* 60-30-10 — dark mode (default) */
    --ui-bg: #0f172a;
    --ui-bg-subtle: #1e293b;
    --ui-bg-elevated: rgba(30, 41, 75, 0.92);
    --ui-bg-muted: rgba(15, 23, 42, 0.85);

    --ui-primary: #1e3a8a;
    --ui-primary-hover: #2563eb;
    --ui-primary-active: #1d4ed8;

    --ui-accent: #ffd700;
    --ui-accent-hover: #ffed4e;
    --ui-accent-active: #e6c200;

    --ui-text: #f1f5f9;
    --ui-text-secondary: #94a3b8;
    --ui-text-muted: rgba(241, 245, 249, 0.55);

    --ui-border: rgba(255, 255, 255, 0.1);
    --ui-border-strong: rgba(255, 215, 0, 0.25);

    /* RGB components — di-override oleh theme-style.php */
    --ui-primary-rgb: 30, 58, 138;
    --ui-accent-rgb: 255, 215, 0;
    --ui-bg-rgb: 15, 23, 42;
    --ui-surface-rgb: 30, 41, 59;
    --ui-header-rgb: 8, 12, 32;
    --theme-header: #080c20;
    --theme-surface: #1e293b;
    --theme-menu-start: #1a1f4b;
    --theme-menu-end: #0f172a;
    --auth-bg-image: var(--page-bg-image, none);

    --ui-success: #10b981;
    --ui-success-bg: rgba(16, 185, 129, 0.15);
    --ui-warning: #f59e0b;
    --ui-warning-bg: rgba(245, 158, 11, 0.15);
    --ui-error: #ef4444;
    --ui-error-bg: rgba(239, 68, 68, 0.15);
    --ui-info: #3b82f6;
    --ui-info-bg: rgba(59, 130, 246, 0.15);

    /* Spacing — 8px grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;

    /* Typography — 1.25 ratio */
    --text-xs: 0.75rem;
    --text-xs-lh: 1rem;
    --text-sm: 0.875rem;
    --text-sm-lh: 1.25rem;
    --text-base: 1rem;
    --text-base-lh: 1.5rem;
    --text-lg: 1.125rem;
    --text-lg-lh: 1.75rem;
    --text-xl: 1.25rem;
    --text-xl-lh: 1.75rem;
    --text-2xl: 1.5rem;
    --text-2xl-lh: 2rem;
    --text-3xl: 1.875rem;
    --text-3xl-lh: 2.25rem;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Motion */
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in: cubic-bezier(0.32, 0, 0.67, 0);

    /* Focus */
    --focus-ring: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-accent);

    /* Z-index scale */
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-overlay: 30;
    --z-modal: 40;
    --z-toast: 50;
    --z-tooltip: 60;

    /* Shadows */
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }
}