/**
 * OLAMI Design System — Unified Design Tokens
 * Single source of truth for colors, radii, shadows, fonts.
 *
 * Light mode = default (:root)
 * Dark mode  = #omm-wrapper[data-theme="dark"] (Command Center only)
 * --dark-*   = always-dark tokens for forced-dark sections (bank, arena)
 */

/* =========================================
   1. LIGHT MODE (default)
   ========================================= */
:root {
    /* Brand */
    --primary: var(--primary-color, #B41F51);
    --primary-hover: var(--primary-color-dark, #8e1840);
    --primary-rgb: var(--primary-rgb, 180, 31, 81);
    --secondary: #0071e3;
    --secondary-hover: #005bb5;

    /* Surfaces */
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-hover: #fafafa;
    --surface-active: #f0f0f0;
    --canvas: #f5f5f7;

    /* Text */
    --text: #1d1d1f;
    --text-secondary: #86868b;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;

    /* Borders */
    --border: #d2d2d7;
    --border-light: #e5e7eb;
    --border-hover: #b0b0b5;

    /* Semantic */
    --success: #34c759;
    --success-bg: #dcfce7;
    --success-text: #166534;
    --danger: #ff3b30;
    --danger-bg: #fef2f2;
    --danger-text: #991b1b;
    --warning: #ff9500;
    --warning-bg: #fffbeb;
    --warning-text: #92400e;
    --info: #3b82f6;
    --info-bg: #eff6ff;
    --info-text: #1e40af;

    /* Coins */
    --coin: #f59e0b;
    --coin-bg: #fffbeb;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.12);

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

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Soft Backgrounds (for badges, highlights) */
    --primary-soft: rgba(var(--primary-rgb), 0.1);
    --success-soft: rgba(52, 199, 89, 0.1);
    --warning-soft: rgba(255, 149, 0, 0.1);
    --danger-soft: rgba(255, 59, 48, 0.1);
    --info-soft: rgba(59, 130, 246, 0.1);
    --coin-soft: rgba(245, 158, 11, 0.1);

    /* Extra Dark Surface */
    --dark-surface-2: #3a3a3c;

    /* Transitions */
    --transition: all 0.2s ease;
    --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Font Alias */
    --font: var(--font-sans);

    /* =========================================
       FORCED-DARK tokens (always available)
       For bank (.cc-wrap) and arena (.arena-wrap)
       ========================================= */
    --dark-bg: #1c1c1e;
    --dark-surface: #2c2c2e;
    --dark-surface-hover: #3a3a3c;
    --dark-text: #ffffff;
    --dark-text-secondary: #aeaeb2;
    --dark-text-muted: #636366;
    --dark-border: rgba(255, 255, 255, 0.15);
    --dark-border-light: rgba(255, 255, 255, 0.08);
    --dark-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --dark-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* =========================================
   2. DARK MODE — Command Center only (#omm-wrapper)
   Scoped so frontend (RSVP, tickets, etc.) is never affected.
   ========================================= */
#omm-wrapper[data-theme="dark"] {
    /* Surfaces */
    --bg: #1c1c1e;
    --surface: #2c2c2e;
    --surface-hover: #3a3a3c;
    --surface-active: #48484a;
    --canvas: #1c1c1e;

    /* Text */
    --text: #f5f5f7;
    --text-secondary: #aeaeb2;
    --text-muted: #636366;
    --text-inverse: #1d1d1f;

    /* Borders */
    --border: rgba(255, 255, 255, 0.15);
    --border-light: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.25);

    /* Semantic (slightly brighter for dark bg) */
    --success: #30d158;
    --success-bg: rgba(48, 209, 88, 0.15);
    --success-text: #30d158;
    --danger: #ff453a;
    --danger-bg: rgba(255, 69, 58, 0.15);
    --danger-text: #ff453a;
    --warning: #ffd60a;
    --warning-bg: rgba(255, 214, 10, 0.15);
    --warning-text: #ffd60a;
    --info: #64d2ff;
    --info-bg: rgba(100, 210, 255, 0.15);
    --info-text: #64d2ff;

    /* Coins */
    --coin: #ffd60a;
    --coin-bg: rgba(255, 214, 10, 0.15);

    /* Soft Backgrounds (dark mode) */
    --primary-soft: rgba(var(--primary-rgb), 0.15);
    --success-soft: rgba(48, 209, 88, 0.15);
    --warning-soft: rgba(255, 214, 10, 0.15);
    --danger-soft: rgba(255, 69, 58, 0.15);
    --info-soft: rgba(100, 210, 255, 0.15);
    --coin-soft: rgba(255, 214, 10, 0.15);

    /* Extra Dark Surface */
    --dark-surface-2: #48484a;

    /* Shadows (deeper for dark mode) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.6);
}