/* =====================================================
   SPINWHEEL FRONTEND - BUAS THEME (Dark Orange)
   Inspirasi: dark-orange + gold accent
   ===================================================== */

:root {
    /* Primary Colors - Dark Orange */
    --primary-color: #F97316;
    --primary-hover: #EA580C;
    --primary-light: #FFEDD5;
    --primary-dark: #9A3412;

    /* Secondary Colors - Gold */
    --secondary-color: #FACC15;
    --secondary-hover: #EAB308;
    --secondary-light: #FEF9C3;
    --secondary-dark: #A16207;

    /* Accent Colors */
    --accent-color: #FB923C;
    --accent-hover: #F97316;

    /* Background Colors */
    --bg-color: #14110F;
    --bg-gradient: linear-gradient(135deg, #1A120B 0%, #2E1A0F 45%, #4A2414 100%);
    --card-bg: #FFF7ED;
    --overlay-bg: rgba(0, 0, 0, 0.6);

    /* Text Colors */
    --text-primary: #1F2937;
    --text-secondary: #374151;
    --text-muted: #6B7280;
    --text-light: #FFFFFF;
    --text-color: #111827;

    /* Border & Divider */
    --border-color: #FCD34D;
    --border-dark: #F59E0B;

    /* Status Colors */
    --success-color: #10B981;
    --success-light: #D1FAE5;
    --success-dark: #065F46;

    --danger-color: #DC2626;
    --danger-light: #FEE2E2;
    --danger-dark: #7F1D1D;

    --warning-color: #F59E0B;
    --warning-light: #FEF3C7;
    --warning-dark: #92400E;

    --info-color: #0EA5E9;
    --info-light: #E0F2FE;
    --info-dark: #0369A1;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 6px 10px -2px rgba(0, 0, 0, 0.2), 0 3px 6px -3px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 14px 20px -4px rgba(0, 0, 0, 0.25), 0 6px 10px -6px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 24px 34px -8px rgba(0, 0, 0, 0.3), 0 10px 14px -8px rgba(0, 0, 0, 0.18);

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;
}

/* Optional wheel-specific defaults */
.wheel-title {
    color: var(--text-light);
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.code-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}