/* ============================================================
   EVE Theme — Design Tokens
   Todas as variáveis CSS do design system. Nunca use valores
   hardcoded nos outros arquivos CSS — sempre referencie tokens.
   ============================================================ */

:root {

	/* ── Cores da Marca ──────────────────────────────────────── */
	--color-forest-green:   #0F4D3F;
	--color-energy-green:   #3DB47C;
	--color-circuit-teal:   #1AA39A;
	--color-deep-blue:      #102A43;
	--color-white:          #FFFFFF;
	--color-light-bg:       #F8F9FA;

	/* ── Escala de Cinzas ────────────────────────────────────── */
	--color-gray-50:  #F8F9FA;
	--color-gray-100: #F1F3F5;
	--color-gray-200: #E9ECEF;
	--color-gray-300: #DEE2E6;
	--color-gray-400: #CED4DA;
	--color-gray-500: #ADB5BD;
	--color-gray-600: #6C757D;
	--color-gray-700: #495057;
	--color-gray-800: #343A40;
	--color-gray-900: #212529;

	/* ── Cores Semânticas ────────────────────────────────────── */
	--color-primary:          var(--color-forest-green);
	--color-primary-hover:    #0A3A2E;
	--color-primary-light:    #E8F5EF;
	--color-accent:           var(--color-energy-green);
	--color-accent-hover:     #30A06B;
	--color-secondary:        var(--color-circuit-teal);
	--color-text:             var(--color-deep-blue);
	--color-text-muted:       var(--color-gray-600);
	--color-text-light:       var(--color-gray-500);
	--color-border:           var(--color-gray-200);
	--color-border-strong:    var(--color-gray-300);
	--color-bg:               var(--color-white);
	--color-bg-alt:           var(--color-light-bg);
	--color-bg-dark:          var(--color-deep-blue);
	--color-bg-primary:       var(--color-forest-green);

	/* ── Estados ─────────────────────────────────────────────── */
	--color-success: #198754;
	--color-warning: #FFC107;
	--color-error:   #DC3545;
	--color-info:    #0DCAF0;

	/* ── Tipografia ──────────────────────────────────────────── */
	--font-heading: 'Sora', system-ui, -apple-system, sans-serif;
	--font-body:    'Inter', system-ui, -apple-system, sans-serif;
	--font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

	/* ── Escala de Tamanhos (fluid) ──────────────────────────── */
	--text-xs:   0.75rem;                              /* 12px */
	--text-sm:   0.875rem;                             /* 14px */
	--text-base: 1rem;                                 /* 16px */
	--text-lg:   1.125rem;                             /* 18px */
	--text-xl:   1.25rem;                              /* 20px */
	--text-2xl:  clamp(1.25rem, 2vw, 1.5rem);         /* 20–24px */
	--text-3xl:  clamp(1.5rem,  2.5vw, 1.875rem);     /* 24–30px */
	--text-4xl:  clamp(1.875rem,3vw, 2.25rem);        /* 30–36px */
	--text-5xl:  clamp(2rem,    4vw, 3rem);            /* 32–48px */
	--text-6xl:  clamp(2.5rem,  5vw, 3.75rem);        /* 40–60px */
	--text-7xl:  clamp(2.75rem, 6vw, 4.5rem);         /* 44–72px */

	/* ── Pesos ───────────────────────────────────────────────── */
	--font-light:    300;
	--font-normal:   400;
	--font-medium:   500;
	--font-semibold: 600;
	--font-bold:     700;
	--font-extrabold: 800;

	/* ── Line Height ─────────────────────────────────────────── */
	--leading-none:    1;
	--leading-tight:   1.2;
	--leading-snug:    1.375;
	--leading-normal:  1.6;
	--leading-relaxed: 1.75;

	/* ── Letter Spacing ──────────────────────────────────────── */
	--tracking-tight:  -0.02em;
	--tracking-normal: 0;
	--tracking-wide:   0.04em;
	--tracking-wider:  0.08em;
	--tracking-widest: 0.12em;

	/* ── Espaçamento (8pt Grid) ──────────────────────────────── */
	--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-14: 3.5rem;    /* 56px */
	--space-16: 4rem;      /* 64px */
	--space-20: 5rem;      /* 80px */
	--space-24: 6rem;      /* 96px */
	--space-28: 7rem;      /* 112px */
	--space-32: 8rem;      /* 128px */

	/* ── Container ───────────────────────────────────────────── */
	--container-max:     1280px;
	--container-wide:    1440px;
	--container-narrow:  760px;
	--container-px:      1.5rem;

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

	/* ── Sombras ─────────────────────────────────────────────── */
	--shadow-xs: 0 1px 2px rgba(16, 42, 67, 0.04);
	--shadow-sm: 0 1px 4px rgba(16, 42, 67, 0.06);
	--shadow-md: 0 4px 16px rgba(16, 42, 67, 0.08);
	--shadow-lg: 0 8px 32px rgba(16, 42, 67, 0.12);
	--shadow-xl: 0 16px 48px rgba(16, 42, 67, 0.16);

	/* ── Transições ──────────────────────────────────────────── */
	--transition-fast:   150ms ease;
	--transition-base:   250ms ease;
	--transition-slow:   400ms ease;
	--transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ── Z-index ─────────────────────────────────────────────── */
	--z-below:    -1;
	--z-base:      0;
	--z-raised:   10;
	--z-dropdown: 100;
	--z-sticky:   200;
	--z-overlay:  300;
	--z-modal:    400;
	--z-toast:    500;

	/* ── Layout ──────────────────────────────────────────────── */
	--header-height:    80px;
	--section-py:       clamp(5rem, 9vw, 7rem);
	--section-py-lg:    clamp(7rem, 11vw, 9rem);
	--section-py-xl:    clamp(8rem, 13vw, 11rem);
}

@media (min-width: 768px) {
	:root {
		--container-px: 2rem;
	}
}

@media (min-width: 1280px) {
	:root {
		--container-px: 2.5rem;
	}
}