/* ==========================================================================
   assets/css/tokens.css — Design Tokens Dislogico (2026 Edition)
   Identidade: DISLOGICO — DISruptive LOGic for IConic Outcomes
   ========================================================================== */

:root {
    /* --- PALETA DE CORES DE FUNDO (DEEP ABYSS DARK) --- */
    --color-bg: #07080c;
    --color-bg-alt: #0d1017;
    --color-surface: #121622;
    --color-surface-hover: #181d2c;
    --color-surface-glass: rgba(14, 17, 26, 0.72);
    --color-surface-glass-card: rgba(18, 22, 34, 0.65);
    --color-bg-input: #111520;
    --color-bg-header: rgba(7, 8, 12, 0.82);

    /* --- CORES DE MARCA (ACID CYAN & HIGH-TECH ACCENTS) --- */
    --color-primary: #00f0ff;
    --color-primary-hover: #33f3ff;
    --color-primary-rgb: 0, 240, 255;
    
    --color-secondary: #00e5a3;
    --color-secondary-rgb: 0, 229, 163;
    
    --color-accent: #8b5cf6;
    --color-accent-rgb: 139, 92, 246;

    --color-pink: #ec4899;

    /* --- GRADIENTES DISRUPTIVOS --- */
    --grad-primary: linear-gradient(135deg, #00f0ff 0%, #00a8ff 100%);
    --grad-accent: linear-gradient(135deg, #00f0ff 0%, #8b5cf6 50%, #ec4899 100%);
    --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    --grad-glow: radial-gradient(circle at 50% 0%, rgba(0, 240, 255, 0.15) 0%, transparent 70%);

    /* --- TIPOGRAFIA & HIERARQUIA DE ALTA PRECISÃO --- */
    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* --- ESCALA TIPOGRÁFICA RESPONSIVA (CLAMPS) --- */
    --text-hero: clamp(2.5rem, 5.5vw + 1rem, 4.8rem);
    --text-h1: clamp(2rem, 3.5vw + 0.5rem, 3.2rem);
    --text-h2: clamp(1.6rem, 2.5vw + 0.3rem, 2.4rem);
    --text-h3: clamp(1.25rem, 1.5vw + 0.2rem, 1.6rem);
    --text-body: 1rem;
    --text-sm: 0.875rem;
    --text-xs: 0.75rem;

    /* --- CORES DE TEXTO --- */
    --color-text: #f0f3f8;
    --color-text-dim: #9aa8be;
    --color-text-muted: #64748b;
    --color-text-inverted: #07080c;

    /* --- BORDAS & GLASSMORPHISM --- */
    --border-glass: 1px solid rgba(255, 255, 255, 0.08);
    --border-glass-light: 1px solid rgba(255, 255, 255, 0.14);
    --border-glow: 1px solid rgba(0, 240, 255, 0.3);
    --border-glow-accent: 1px solid rgba(139, 92, 246, 0.35);

    /* --- SOMBRAS & GLOWS --- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
    --shadow-glow-cyan: 0 0 35px rgba(0, 240, 255, 0.22);
    --shadow-glow-cyan-lg: 0 0 65px rgba(0, 240, 255, 0.35);
    --shadow-glow-accent: 0 0 40px rgba(139, 92, 246, 0.25);

    /* --- RADIUS --- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-full: 9999px;

    /* --- TRANSIÇÕES FLUIDAS --- */
    --transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- LAYOUT DIMENSIONS --- */
    --header-height: 80px;
    --container-max: 1240px;
    --container-wide: 1400px;
}