/*
 * variables.css — RUPSTACK
 * Design Tokens: Preto & Branco (estrutura), Turquesa (acento), Laranja Muted (ruptura)
 */

@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');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap');

:root {
    /* ──────────────────────────────────────────────
       Paleta RUPSTACK — Disruptiva & Estruturada
    ────────────────────────────────────────────── */
    /* Base e Estrutura: Preto, Cinzento Profundo e Branco */
    --color-background:           #13151a;
    --color-background-secondary: #16181e;
    --color-surface:              #1a1d24;
    --color-surface-hover:        #1f2330;
    --color-white:                #f8fafe;
    --color-text:                 #e2e8f0;
    --color-text-muted:           #94a3b8;
    --color-border:               rgba(255, 255, 255, 0.10);
    --color-border-hover:         rgba(255, 255, 255, 0.22);

    /* Acento Principal (Tecnologia/Lógica): Azul Turquesa Elegante */
    --color-primary:              #13a39a;
    --color-primary-dark:         #0e827b;
    --color-primary-light:        #2ac2b8;

    /* Acento Secundário (Ruptura/Disrupção): Laranja Muted/Desaturado */
    --color-accent:               #cf7336;
    --color-accent-dark:          #af5c26;
    --color-accent-light:         #e28b52;

    /* Aliases e Status */
    --color-secondary:            var(--color-accent);
    --color-secondary-dark:       var(--color-accent-dark);
    --color-success:              #2ecc71;
    --color-error:                #e74c3c;
    --color-warning:              #f39c12;

    /* Gradientes Sóbrios & Disruptivos */
    --gradient-primary:    linear-gradient(135deg, var(--color-primary) 0%, #0e6d68 100%);
    --gradient-disrupt:    linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    --gradient-bg:         linear-gradient(180deg, var(--color-background) 0%, var(--color-background-secondary) 100%);
    --gradient-glow:       radial-gradient(ellipse 55% 45% at 50% 0%, rgba(19, 163, 154, 0.12) 0%, transparent 70%);
    --gradient-glow-amber: radial-gradient(ellipse 40% 35% at 85% 60%, rgba(207, 115, 54, 0.09) 0%, transparent 70%);

    /* ──────────────────────────────────────────────
       Tipografia
    ────────────────────────────────────────────── */
    --font-family:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-mono:      'JetBrains Mono', monospace;
    --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.4rem,  4.2vw, 3.8rem);

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

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

    --section-padding-y: clamp(4.5rem, 8vw, 7.5rem);

    /* ──────────────────────────────────────────────
       Bordas & Pilha Deslocada (Offset Stack)
    ────────────────────────────────────────────── */
    --radius-sm:  4px;
    --radius-md:  6px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-full: 9999px;

    /* Offset shadows para conceito de disrupção e blocos deslocados */
    --stack-offset-sm: 3px 3px 0px rgba(255, 255, 255, 0.08);
    --stack-offset-md: 5px 5px 0px rgba(19, 163, 154, 0.35);
    --stack-offset-amber: -5px 5px 0px rgba(207, 115, 54, 0.4);

    /* Sombras */
    --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 6px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg:  0 12px 36px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 30px rgba(19, 163, 154, 0.2);
    --shadow-glow-orange: 0 0 30px rgba(207, 115, 54, 0.2);

    /* Transições */
    --transition-fast:   150ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-base:   250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slow:   400ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slower: 700ms cubic-bezier(0.2, 0.8, 0.2, 1);

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

    --container-max: 1240px;
    --container-gap: 40px;
    --header-height: 94px;
}