/**
 * StChannel Master CSS Variables
 * 
 * Sistema unificato di variabili CSS per tutto il tenant StChannel.
 * Questo file deve essere caricato per primo per garantire la disponibilità
 * delle variabili in tutti gli altri file CSS.
 * 
 * Ordine di caricamento raccomandato:
 * 1. _variables.css (questo file)
 * 2. _bootstrap-overrides.css
 * 3. Altri file specifici
 */

:root {
    /* ========================================
       SISTEMA DI COLORI PRINCIPALE
       ======================================== */
    
    /* Colore primario unificato StChannel */
    --st-primary: #00ff9d;
    --st-primary-rgb: 0, 255, 157;
    --st-primary-dark: #00cc7d;
    --st-primary-light: #33ffac;
    --st-primary-darker: #00995f;
    --st-primary-lighter: #66ffbc;
    
    /* Varianti del verde per diversi usi */
    --st-green-neon: #00ff41;
    --st-green-bright: #7fff00;
    --st-green-forest: #228b22;
    --st-green-emerald: #50c878;
    
    /* Colori secondari */
    --st-secondary: #8b5cf6;
    --st-secondary-rgb: 139, 92, 246;
    --st-secondary-dark: #6b5b95;
    --st-secondary-light: #a78bfa;
    
    /* ========================================
       PALETTE NEUTRA E BACKGROUND
       ======================================== */
    
    /* Colori scuri per background */
    --st-black: #000000;
    --st-dark: #0a0a0a;
    --st-dark-card: #111111;
    --st-dark-surface: #1a1a1a;
    --st-dark-elevated: #2d2d2d;
    
    /* Colori chiari */
    --st-white: #ffffff;
    --st-light: #f8f9fa;
    --st-light-gray: #e2e8f0;
    --st-light-surface: #f7fafc;
    
    /* Testi */
    --st-text-primary: #ffffff;
    --st-text-secondary: #a0a0a0;
    --st-text-muted: #666666;
    --st-text-accent: #f0f6fc;
    --st-text-dark: #1a202c;
    
    /* ========================================
       SISTEMA DI GRADIENTI
       ======================================== */
    
    /* Gradienti primari */
    --st-gradient-primary: linear-gradient(135deg, var(--st-primary) 0%, var(--st-primary-dark) 100%);
    --st-gradient-primary-soft: linear-gradient(135deg, rgba(0, 255, 157, 0.1) 0%, rgba(0, 204, 125, 0.2) 100%);
    --st-gradient-primary-intense: linear-gradient(135deg, var(--st-green-neon) 0%, var(--st-primary) 50%, var(--st-primary-light) 100%);
    
    /* Gradienti scuri */
    --st-gradient-dark: linear-gradient(135deg, var(--st-dark) 0%, var(--st-dark-elevated) 100%);
    --st-gradient-dark-card: linear-gradient(135deg, var(--st-dark-card) 0%, var(--st-dark-surface) 100%);
    --st-gradient-black: linear-gradient(135deg, var(--st-black) 0%, var(--st-dark) 50%, var(--st-dark-surface) 100%);
    
    /* Gradienti secondari */
    --st-gradient-secondary: linear-gradient(135deg, var(--st-secondary) 0%, var(--st-secondary-dark) 100%);
    --st-gradient-hero: linear-gradient(135deg, var(--st-primary) 0%, var(--st-primary-dark) 25%, var(--st-primary-light) 50%, var(--st-green-neon) 100%);
    
    /* Gradienti glass/vetro */
    --st-gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    --st-gradient-glass-dark: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
    
    /* ========================================
       SISTEMA DI OMBRE
       ======================================== */
    
    /* Ombre standard */
    --st-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --st-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --st-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.2);
    --st-shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.3);
    --st-shadow-xl: 0 32px 128px rgba(0, 0, 0, 0.4);
    
    /* Ombre colorate (effetto glow) */
    --st-shadow-primary: 0 4px 6px rgba(0, 255, 157, 0.1);
    --st-shadow-primary-lg: 0 10px 25px rgba(0, 255, 157, 0.15);
    --st-shadow-glow: 0 0 40px rgba(0, 255, 157, 0.4);
    --st-shadow-neon: 0 0 60px rgba(0, 255, 65, 0.5);
    --st-shadow-intense: 0 0 80px rgba(0, 255, 136, 0.6);
    
    /* ========================================
       SISTEMA DI BORDER RADIUS
       ======================================== */
    
    --st-radius-xs: 4px;
    --st-radius-sm: 8px;
    --st-radius-md: 16px;
    --st-radius-lg: 24px;
    --st-radius-xl: 32px;
    --st-radius-full: 50%;
    --st-radius-button: 30px;  /* Per i pulsanti arrotondati */
    
    /* ========================================
       SISTEMA DI SPACING
       ======================================== */
    
    --st-space-xs: 0.25rem;    /* 4px */
    --st-space-sm: 0.5rem;     /* 8px */
    --st-space-md: 1rem;       /* 16px */
    --st-space-lg: 1.5rem;     /* 24px */
    --st-space-xl: 2rem;       /* 32px */
    --st-space-2xl: 3rem;      /* 48px */
    --st-space-3xl: 4rem;      /* 64px */
    
    /* ========================================
       SISTEMA TIPOGRAFICO
       ======================================== */
    
    /* Font families */
    --st-font-primary: 'Montserrat', sans-serif;
    --st-font-secondary: 'Roboto', sans-serif;
    --st-font-mono: 'Fira Code', 'Cascadia Code', monospace;
    
    /* Font weights */
    --st-font-light: 300;
    --st-font-regular: 400;
    --st-font-medium: 500;
    --st-font-semibold: 600;
    --st-font-bold: 700;
    --st-font-black: 900;
    
    /* Font sizes */
    --st-text-xs: 0.75rem;     /* 12px */
    --st-text-sm: 0.875rem;    /* 14px */
    --st-text-base: 1rem;      /* 16px */
    --st-text-lg: 1.125rem;    /* 18px */
    --st-text-xl: 1.25rem;     /* 20px */
    --st-text-2xl: 1.5rem;     /* 24px */
    --st-text-3xl: 1.875rem;   /* 30px */
    --st-text-4xl: 2.25rem;    /* 36px */
    --st-text-5xl: 3rem;       /* 48px */
    
    /* Line heights */
    --st-leading-tight: 1.25;
    --st-leading-normal: 1.5;
    --st-leading-relaxed: 1.75;
    
    /* ========================================
       SISTEMA DI TRANSIZIONI
       ======================================== */
    
    --st-transition-fast: 0.15s ease-out;
    --st-transition-normal: 0.3s ease-out;
    --st-transition-slow: 0.5s ease-out;
    --st-transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ========================================
       SISTEMA DI Z-INDEX
       ======================================== */
    
    --st-z-dropdown: 1000;
    --st-z-sticky: 1020;
    --st-z-fixed: 1030;
    --st-z-modal-backdrop: 1040;
    --st-z-modal: 1050;
    --st-z-popover: 1060;
    --st-z-tooltip: 1070;
    --st-z-max: 9999;
    
    /* ========================================
       VARIABILI SPECIFICHE COMPONENTI
       ======================================== */
    
    /* Chat */
    --st-chat-bg: var(--st-dark-card);
    --st-chat-header-bg: var(--st-gradient-dark);
    --st-chat-message-bg: var(--st-dark-surface);
    --st-chat-border: rgba(0, 255, 157, 0.2);
    
    /* Cards */
    --st-card-bg: var(--st-dark-card);
    --st-card-border: rgba(255, 255, 255, 0.1);
    --st-card-hover-shadow: var(--st-shadow-primary-lg);
    
    /* Buttons */
    --st-btn-primary-bg: var(--st-primary);
    --st-btn-primary-color: var(--st-black);
    --st-btn-primary-hover-bg: var(--st-primary-light);
    --st-btn-radius: var(--st-radius-button);
    
    /* Navigation */
    --st-nav-bg: var(--st-gradient-dark);
    --st-nav-link-color: rgba(255, 255, 255, 0.9);
    --st-nav-link-hover-color: var(--st-primary);
    
    /* Portfolio */
    --st-portfolio-card-bg: var(--st-gradient-dark-card);
    --st-portfolio-overlay: rgba(0, 0, 0, 0.8);
    
    /* Services */
    --st-service-card-bg: var(--st-dark-surface);
    --st-service-icon-bg: var(--st-gradient-primary);
    
    /* Blog */
    --st-blog-card-bg: var(--st-dark-card);
    --st-blog-meta-color: var(--st-text-muted);
}

/* ========================================
   UTILITÀ PER DEBUGGING E SVILUPPO
   ======================================== */

/* Mostra variabili in console per debugging */
.st-debug-vars::before {
    content: "StChannel CSS Variables Loaded ✓";
    position: fixed;
    top: 0;
    right: 0;
    background: var(--st-primary);
    color: var(--st-black);
    padding: var(--st-space-xs) var(--st-space-sm);
    font-size: var(--st-text-xs);
    z-index: var(--st-z-max);
    opacity: 0;
    animation: debug-flash 2s ease-out;
}

@keyframes debug-flash {
    0%, 90% { opacity: 0; }
    10%, 80% { opacity: 1; }
}

/* ========================================
   COMPATIBILITÀ LEGACY
   ======================================== */

/* Alias per compatibilità con file esistenti */
:root {
    /* Alias Bootstrap */
    --bs-primary: var(--st-primary);
    --bs-primary-rgb: var(--st-primary-rgb);
    
    /* Alias stchannel-theme.css */
    --stchannel-primary: var(--st-primary);
    --stchannel-primary-dark: var(--st-primary-dark);
    --stchannel-primary-light: var(--st-primary-light);
    --stchannel-primary-rgb: var(--st-primary-rgb);
    --stchannel-gradient-primary: var(--st-gradient-primary);
    --stchannel-gradient-dark: var(--st-gradient-dark);
    --stchannel-gradient-hero: var(--st-gradient-hero);
    --stchannel-dark: var(--st-dark-surface);
    --stchannel-light: var(--st-white);
    --stchannel-gray: var(--st-text-muted);
    --stchannel-gray-light: var(--st-light-gray);
    --stchannel-shadow: var(--st-shadow-primary);
    --stchannel-shadow-lg: var(--st-shadow-primary-lg);
    
    /* Alias components.css */
    --primary-green: var(--st-primary);
    --secondary-green: var(--st-primary-dark);
    --accent-green: var(--st-primary-light);
    --dark-green: var(--st-primary-darker);
    --neon-green: var(--st-green-neon);
    --bright-green: var(--st-green-bright);
    --bg-primary: var(--st-black);
    --bg-secondary: var(--st-dark);
    --bg-card: var(--st-dark-card);
    --bg-surface: var(--st-dark-surface);
    --text-primary: var(--st-text-primary);
    --text-secondary: var(--st-text-secondary);
    --text-accent: var(--st-text-accent);
    --text-muted: var(--st-text-muted);
    
    /* Alias services e portfolio */
    --service-primary: var(--st-primary);
    --service-secondary: var(--st-secondary);
    --service-light: var(--st-light-gray);
    --portfolio-primary-color: var(--st-primary);
    --portfolio-primary-rgb: var(--st-primary-rgb);
    --portfolio-bg-color: var(--st-dark-card);
    
    /* Card gradient variables for blog cards */
    --card-gradient-start: var(--st-primary);
    --card-gradient-end: #ff4757;
}