/**
 * DESIGN TOKENS - VIOLICORP v2.1
 * 
 * Padrão Apple/Meta
 * Fonte: https://www.figma.com/design-systems/apple
 * Todas as cores, tipografia e spacing centralizadas aqui
 * 
 * ⚠️ IMPORTANTE: Sempre atualize aqui primeiro antes de mudar no CSS
 */

:root {
    /* ════════════════════════════════════════════════════════════════ */
    /* CORES - Paleta Violicorp */
    /* ════════════════════════════════════════════════════════════════ */
    
    /* Neutros - Base (Dark Mode) */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray-950: #0a0a0a;
    --color-gray-900: #1c1c1e;
    --color-gray-800: #2c2c2e;
    --color-gray-700: #3a3a3c;
    --color-gray-600: #515155;
    --color-gray-500: #8e8e93;
    --color-gray-400: #a9a9af;
    --color-gray-300: #d5d5d7;
    --color-gray-200: #e5e5e7;
    --color-gray-100: #f5f5f7;
    
    /* Primário - Blue (Sistema) */
    --color-primary-50: #f0f7ff;
    --color-primary-100: #e0efff;
    --color-primary-200: #bae6ff;
    --color-primary: #0a84ff;
    --color-primary-dark: #0071e3;
    --color-primary-darker: #0051ba;
    
    /* Sucesso - Green */
    --color-success-light: #3fb950;
    --color-success: #30d158;
    --color-success-dark: #238636;
    --color-success-darker: #1b5e20;
    
    /* Perigo - Red */
    --color-danger-light: #ff453a;
    --color-danger: #ff3b30;
    --color-danger-dark: #da3633;
    --color-danger-darker: #a21818;
    
    /* Aviso - Orange */
    --color-warning-light: #ffb340;
    --color-warning: #ff9500;
    --color-warning-dark: #d29922;
    --color-warning-darker: #704214;
    
    /* Informação - Cyan/Light Blue */
    --color-info: #50c7ff;
    --color-info-dark: #0d6efd;
    
    /* ════════════════════════════════════════════════════════════════ */
    /* BACKGROUNDS */
    /* ════════════════════════════════════════════════════════════════ */
    --bg-primary: #000000;
    --bg-secondary: #1c1c1e;
    --bg-tertiary: #2c2c2e;
    --bg-quaternary: #3a3a3c;
    --bg-elevated: rgba(28, 28, 30, 0.85);
    --bg-hover: rgba(45, 45, 47, 0.5);
    
    /* ════════════════════════════════════════════════════════════════ */
    /* TIPOGRAFIA */
    /* ════════════════════════════════════════════════════════════════ */
    
    /* Font Family - Apple/Meta Stack */
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    
    /* Font Sizes - Escala typográfica */
    --font-xs: 12px;          /* Labels, hints, badges */
    --font-sm: 13px;          /* Small text, helper text */
    --font-base: 15px;        /* Body text padrão */
    --font-lg: 16px;          /* Titles pequenos, form labels */
    --font-xl: 18px;          /* Section titles */
    --font-2xl: 20px;         /* Page titles */
    --font-3xl: 24px;         /* Large titles */
    --font-4xl: 32px;         /* Hero titles */
    --font-5xl: 40px;         /* Jumbotron */
    
    /* Font Weights */
    --font-thin: 100;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    
    /* ════════════════════════════════════════════════════════════════ */
    /* SPACING (8px base) */
    /* ════════════════════════════════════════════════════════════════ */
    --spacing-xs: 4px;        /* Extra pequeno */
    --spacing-sm: 8px;        /* Pequeno */
    --spacing-md: 12px;       /* Médio */
    --spacing-lg: 16px;       /* Grande */
    --spacing-xl: 20px;       /* Extra grande */
    --spacing-2xl: 24px;      /* 2x grande */
    --spacing-3xl: 32px;      /* 3x grande */
    --spacing-4xl: 40px;      /* 4x grande */
    --spacing-5xl: 48px;      /* 5x grande */
    --spacing-6xl: 56px;      /* 6x grande */
    
    /* ════════════════════════════════════════════════════════════════ */
    /* BORDER RADIUS */
    /* ════════════════════════════════════════════════════════════════ */
    --radius-none: 0px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 18px;
    --radius-3xl: 20px;
    --radius-full: 9999px;
    
    /* ════════════════════════════════════════════════════════════════ */
    /* SHADOWS (Glassmorphism inspired) */
    /* ════════════════════════════════════════════════════════════════ */
    --shadow-none: 0 0 0 transparent;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    
    /* ════════════════════════════════════════════════════════════════ */
    /* GLASS EFFECT (Glassmorphism) */
    /* ════════════════════════════════════════════════════════════════ */
    --glass-bg: rgba(28, 28, 30, 0.85);
    --glass-blur: blur(20px);
    --glass-blur-webkit: blur(20px);
    --glass-backdrop: 0.85;
    
    /* ════════════════════════════════════════════════════════════════ */
    /* BORDERS */
    /* ════════════════════════════════════════════════════════════════ */
    --border-thin: 0.5px;
    --border-light: 1px;
    --border-medium: 1.5px;
    --border-heavy: 2px;
    
    /* ════════════════════════════════════════════════════════════════ */
    /* TRANSIÇÕES */
    /* ════════════════════════════════════════════════════════════════ */
    --transition-fast: 0.1s ease-in-out;
    --transition-base: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
    --transition-slower: 0.5s ease-in-out;
    --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* ════════════════════════════════════════════════════════════════ */
    /* Z-INDEX (Stacking Context) */
    /* ════════════════════════════════════════════════════════════════ */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* MODO DARK (Padrão) - Nenhuma mudança necessária */
/* ════════════════════════════════════════════════════════════════════════════ */

/* Possível implementação de Light Mode no futuro */
@media (prefers-color-scheme: light) {
    /* :root {
        --color-black: #ffffff;
        --color-white: #000000;
        --bg-primary: #ffffff;
        --bg-secondary: #f5f5f7;
        --bg-tertiary: #e5e5e7;
    } */
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* ACCESSIBILITY - Prefer Reduced Motion */
/* ════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-base: 0s;
        --transition-slow: 0s;
        --transition-slower: 0s;
    }
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* LEMBRETE IMPORTANTE */
/* ════════════════════════════════════════════════════════════════════════════ */

/*
⚠️ REGRA DE OURO:
─────────────────
1. SEMPRE usar variáveis CSS, NUNCA hardcode colors/sizes
   2. Se adicionar cor nova, definir em :root PRIMEIRO
   3. Se adicionar componente, usar classes reutilizáveis
   4. Se mudar visual global, mude aqui e tudo se atualiza
   5. Manter padrão Apple/Meta em tudo

   ❌ ERRADO:
   .button { background: #0a84ff; }

   ✅ CORRETO:
   .button { background: var(--color-primary); }
*/