/**
 * Snowfire AI Brand CSS Variables
 * Orange-Pink-Purple Gradient Theme on Black Background
 * Version 2.0
 */

:root {
    /* ============================================
       PRIMARY GRADIENT COLORS
       ============================================ */
    --color-orange-400: #fb923c;
    --color-orange-400-rgb: 251, 146, 60;
    --color-pink-400: #f472b6;
    --color-pink-400-rgb: 244, 114, 182;
    --color-purple-400: #a78bfa;
    --color-purple-400-rgb: 167, 139, 250;

    /* Hover States (Darker) */
    --color-orange-600: #ea580c;
    --color-orange-600-rgb: 234, 88, 12;
    --color-pink-600: #db2777;
    --color-pink-600-rgb: 219, 39, 119;
    --color-purple-600: #9333ea;
    --color-purple-600-rgb: 147, 51, 234;

    /* ============================================
       GRADIENT DEFINITIONS
       ============================================ */
    --gradient-primary: linear-gradient(to right, var(--color-orange-400), var(--color-pink-400), var(--color-purple-400));
    --gradient-primary-br: linear-gradient(to bottom right, var(--color-orange-400), var(--color-pink-400), var(--color-purple-400));
    --gradient-primary-button: linear-gradient(to right, #f97316, #ec4899, #a855f7);
    --gradient-primary-button-hover: linear-gradient(to right, var(--color-orange-600), var(--color-pink-600), var(--color-purple-600));

    /* ============================================
       BACKGROUND COLORS
       ============================================ */
    --bg-primary: #000000;
    --bg-secondary: #111827;
    --bg-card: rgba(17, 24, 39, 0.5);
    --bg-card-solid: #1f2937;
    --bg-hover: rgba(31, 41, 39, 0.8);

    /* ============================================
       TEXT COLORS
       ============================================ */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-tertiary: #9ca3af;
    --text-muted: #6b7280;

    /* ============================================
       BORDER COLORS
       ============================================ */
    --border-color: #1f2937;
    --border-color-hover: #374151;
    --border-color-accent: var(--color-orange-400);

    /* ============================================
       SPACING SCALE
       ============================================ */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */

    /* ============================================
       TYPOGRAPHY
       ============================================ */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Font Sizes */
    --font-size-xs: 0.85rem;      /* 13.6px */
    --font-size-sm: 0.9rem;       /* 14.4px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-md: 1.1rem;       /* 17.6px */
    --font-size-lg: 1.3rem;       /* 20.8px */
    --font-size-xl: 1.5rem;       /* 24px */
    --font-size-2xl: 1.8rem;     /* 28.8px */
    --font-size-3xl: 3rem;       /* 48px */
    --font-size-4xl: 3.5rem;     /* 56px */

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.1;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;

    /* ============================================
       BORDER RADIUS
       ============================================ */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-full: 50%;
    --radius-rounded: 20px;

    /* ============================================
       SHADOWS
       ============================================ */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.6);
    --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.7);
    
    /* Colored Shadows */
    --shadow-orange-sm: 0 2px 6px rgba(251, 146, 60, 0.15);
    --shadow-orange-md: 0 4px 12px rgba(251, 146, 60, 0.25);
    --shadow-orange-lg: 0 8px 24px rgba(251, 146, 60, 0.35);

    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 0.2s;
    --transition-base: 0.3s;
    --transition-slow: 0.5s;
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================
       Z-INDEX SCALE
       ============================================ */
    --z-base: 1;
    --z-navbar: 100;
    --z-dropdown: 500;
    --z-modal: 1000;
    --z-overlay: 2000;

    /* ============================================
       LAYOUT
       ============================================ */
    --container-max-width: 1200px;
    --container-padding: 0 20px;
}

/* ============================================
   UTILITY CLASSES USING VARIABLES
   ============================================ */

/* Text Gradients */
.text-gradient-brand {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text-gradient-brand-glow {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(249, 115, 22, 0.3));
}

/* Background Gradients */
.bg-gradient-brand {
    background: var(--gradient-primary);
}

.bg-gradient-brand-subtle {
    background: linear-gradient(to bottom right, 
        rgba(251, 146, 60, 0.2), 
        rgba(244, 114, 182, 0.2), 
        rgba(167, 139, 250, 0.2));
}

/* Button Styles */
.btn-gradient {
    background: var(--gradient-primary-button);
    color: var(--text-primary);
    border: none;
    transition: all var(--transition-base);
}

.btn-gradient:hover {
    background: var(--gradient-primary-button-hover);
    box-shadow: var(--shadow-orange-md);
}

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }

/* Background Colors */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-card { background-color: var(--bg-card); }

/* Spacing Utilities */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-orange { box-shadow: var(--shadow-orange-md); }

/* Glow Animation */
@keyframes subtle-glow {
    0%, 100% {
        opacity: 0.95;
        filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.3))
                 drop-shadow(0 0 40px rgba(236, 72, 153, 0.2))
                 drop-shadow(0 0 60px rgba(168, 85, 247, 0.1));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 30px rgba(249, 115, 22, 0.5))
                 drop-shadow(0 0 60px rgba(236, 72, 153, 0.3))
                 drop-shadow(0 0 90px rgba(168, 85, 247, 0.2));
    }
}

.animate-subtle-glow {
    animation: subtle-glow 2.5s ease-in-out infinite;
    will-change: opacity, filter;
    transform: translate3d(0, 0, 0);
}