/*
 * TEXA SPECIALIST — Design Tokens
 * Fonte: knowledge/marca/brand-guidelines.md + knowledge/marca/design-texa.md
 * Uso: importar em components.css e em qualquer LP deste projeto
 * Atualizado: 2026-05-04
 */

:root {

  /* ─── MARCA ─────────────────────────────────────────────────── */
  --texa-blue:        #012169;   /* Pantone 280 C — cor institucional */
  --texa-blue-dark:   #010f40;   /* hover, pressed */

  /* ─── AMBIENTES ─────────────────────────────────────────────── */
  --env-car:     #FFFFFF;
  --env-bike:    #D0260C;        /* RGB 208, 38, 12 */
  --env-truck:   #0062C7;
  --env-ohw:     #4CAF50;
  --env-marine:  #5BCCD4;
  --env-texaedu: #A8AD00;

  /* ─── PALETA DARK PREMIUM ────────────────────────────────────── */
  --bg-base:         #060608;    /* fundo global — quase preto */
  --bg-surface:      #0d0d10;    /* cards, seções alternadas */
  --bg-raised:       #141417;    /* input fields, accordions */
  --bg-overlay:      rgba(6, 6, 8, 0.72); /* overlay sobre hero foto */

  /* ─── TEXTO ─────────────────────────────────────────────────── */
  --text-primary:    #FFFFFF;
  --text-secondary:  #a0a0b0;    /* subtítulos, labels */
  --text-muted:      #8a8a9a;    /* placeholders, copyright (contraste WCAG AA ≥4.5 sobre dark) */
  --text-dark:       #080e1a;    /* texto sobre CAR/#FFFFFF */

  /* ─── ACENTO PRINCIPAL — laranja WARM SPECIALIST ─────────────── */
  /* Cor #d45125 do logo TEXA SPECIALIST — alta visibilidade em fundo dark */
  /* Substitui o azul institucional como acento principal da LP */
  --accent-warm:        #d45125;
  --accent-warm-soft:   rgba(212, 81, 37, 0.18);
  --accent-warm-glow:   rgba(212, 81, 37, 0.45);

  --accent:          var(--accent-warm);
  --accent-hover:    #b03e1a;
  --accent-pressed:  #8c2f12;
  --accent-glow:     var(--accent-warm-glow);

  /* Azul TEXA institucional ainda disponível pra uso pontual via --texa-blue */
  --accent-env:      var(--env-bike);

  /* ─── BORDAS / DIVISORES ─────────────────────────────────────── */
  --border-subtle:   rgba(255, 255, 255, 0.08);
  --border-medium:   rgba(255, 255, 255, 0.16);
  --border-strong:   rgba(255, 255, 255, 0.32);

  /* ─── SPACING SCALE ──────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  /* ─── TIPOGRAFIA SCALE ───────────────────────────────────────── */
  /* clamp(min, preferred-vw, max) — escala fluida mobile→desktop  */
  --font-family: 'Roboto', sans-serif;

  --text-xs:   clamp(11px, 1.1vw, 12px);
  --text-sm:   clamp(13px, 1.3vw, 14px);
  --text-base: clamp(15px, 1.5vw, 17px);   /* body mínimo 16px em mobile */
  --text-md:   clamp(17px, 1.7vw, 20px);
  --text-lg:   clamp(20px, 2vw, 24px);
  --text-xl:   clamp(24px, 2.5vw, 28px);
  --text-2xl:  clamp(28px, 3vw, 36px);
  --text-3xl:  clamp(32px, 4vw, 48px);
  --text-4xl:  clamp(40px, 5.5vw, 64px);
  --text-5xl:  clamp(52px, 7vw, 88px);
  --text-hero: clamp(44px, 7vw, 96px);     /* headline hero — peso 900 */

  /* ─── LINE-HEIGHT ────────────────────────────────────────────── */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* REGRA GLOBAL: letter-spacing: 0 em tudo — exceto onde explicitamente definido */
  --tracking-0:     0;
  --tracking-wide:  0.04em;  /* kickers/labels apenas */
  --tracking-wider: 0.08em;  /* uso excepcional — badges */

  /* ─── BORDER-RADIUS ──────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;

  /* ─── SHADOWS ────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-glow-accent: 0 0 32px rgba(1, 33, 105, 0.45); /* TEXA accent glow */

  /* ─── TRANSITIONS ────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms cubic-bezier(.2,.8,.2,1);
  --transition-reveal: 800ms cubic-bezier(.16,1,.3,1);  /* scroll reveal premium */

  /* ─── LAYOUT ─────────────────────────────────────────────────── */
  --container-max:  1200px;
  --container-pad:  clamp(20px, 5vw, 80px);

  /* ─── Z-INDEX SCALE ──────────────────────────────────────────── */
  --z-base:    1;
  --z-overlay: 10;
  --z-sticky:  100;
  --z-modal:   1000;

  /* ─── BREAKPOINTS (referência — use media queries no CSS) ─────── */
  /* mobile-first: breakpoint único em 768px                        */
  /* --bp-md: 768px;                                                 */
}

/* ─── RESET & BASE ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}

img, video, picture {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  background: none;
  letter-spacing: 0;
}

ul, ol {
  list-style: none;
}

/* ─── UTILITY: visualmente oculto (acessibilidade) ───────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ─── FOCUS VISIBLE ──────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}