/*
 * variables.css — Cognivelo
 * Design Tokens: cores, tipografia, espaçamentos, transições e z-index
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
    /* ──────────────────────────────────────────────
       Paleta de Cores
    ────────────────────────────────────────────── */
    --color-background:           #071426;
    --color-background-secondary: #0b1d33;
    --color-surface:              #10243d;
    --color-surface-hover:        #142c4a;
    --color-primary:              #176bce;
    --color-primary-dark:         #1259a8;
    --color-primary-light:        #2a7ed4;
    --color-secondary:            #13b8b0;
    --color-secondary-dark:       #0f9690;
    --color-white:                #f5f7fa;
    --color-text:                 #d9e1eb;
    --color-text-muted:           #aab4c3;
    --color-border:               rgba(255, 255, 255, 0.08);
    --color-border-hover:         rgba(255, 255, 255, 0.18);
    --color-success:              #2ecc71;
    --color-error:                #e74c3c;
    --color-warning:              #f39c12;

    /* Gradientes */
    --gradient-primary:    linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-primary-h:  linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-secondary-dark) 100%);
    --gradient-bg:         linear-gradient(180deg, var(--color-background) 0%, var(--color-background-secondary) 100%);
    --gradient-glow:       radial-gradient(ellipse 60% 40% at 50% 0%, rgba(23, 107, 206, 0.15) 0%, transparent 70%);
    --gradient-glow-teal:  radial-gradient(ellipse 50% 35% at 80% 50%, rgba(19, 184, 176, 0.08) 0%, transparent 70%);

    /* ──────────────────────────────────────────────
       Tipografia
    ────────────────────────────────────────────── */
    --font-family:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-weight-light:      300;
    --font-weight-regular:    400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;
    --font-weight-extrabold:  800;

    /* Tamanhos fluidos */
    --text-xs:   clamp(0.70rem, 1.2vw, 0.75rem);
    --text-sm:   clamp(0.80rem, 1.4vw, 0.875rem);
    --text-base: clamp(0.95rem, 1.6vw, 1rem);
    --text-md:   clamp(1rem,    1.8vw, 1.125rem);
    --text-lg:   clamp(1.1rem,  2.0vw, 1.25rem);
    --text-xl:   clamp(1.2rem,  2.4vw, 1.5rem);
    --text-2xl:  clamp(1.4rem,  3.0vw, 2rem);
    --text-3xl:  clamp(1.8rem,  4.0vw, 2.75rem);
    --text-4xl:  clamp(2.2rem,  5.0vw, 3.5rem);
    --text-hero: clamp(2.2rem,  3.8vw, 3.4rem);

    /* Alturas de linha */
    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    /* ──────────────────────────────────────────────
       Espaçamentos
    ────────────────────────────────────────────── */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */

    /* Seções */
    --section-padding-y: clamp(4rem, 8vw, 7rem);

    /* ──────────────────────────────────────────────
       Bordas
    ────────────────────────────────────────────── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-full: 9999px;

    /* ──────────────────────────────────────────────
       Sombras
    ────────────────────────────────────────────── */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(23, 107, 206, 0.25);

    /* ──────────────────────────────────────────────
       Transições
    ────────────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-slower: 600ms ease;

    /* ──────────────────────────────────────────────
       Z-Index
    ────────────────────────────────────────────── */
    --z-base:    1;
    --z-above:   10;
    --z-overlay: 100;
    --z-menu:    200;
    --z-header:  500;
    --z-skip:    10000;

    /* ──────────────────────────────────────────────
       Container
    ────────────────────────────────────────────── */
    --container-max: 1240px;
    --container-gap: 40px;

    /* ──────────────────────────────────────────────
       Header
    ────────────────────────────────────────────── */
    --header-height: 94px;
}