/* ==========================================================================
   Guincho Pantanal — Design tokens
   --------------------------------------------------------------------------
   ÚNICA fonte de verdade de cor, tipografia, espaço, raio, sombra e movimento.
   Carregar DEPOIS do bootstrap.min.css (a ponte no fim reescreve as --bs-*).

   Camada 1 (primitivos)  → valores brutos. NUNCA usar direto em componente.
   Camada 2 (semânticos)  → os ÚNICOS que base.css/site.css podem usar.
   Direção: "o selo como giroflex na beira da estrada" (_projeto/direcao.md).
   Asfalto + branco + vermelho Pantanal usado como sinal.
   ========================================================================== */

/* ---------- CAMADA 1 — PRIMITIVOS ---------- */
:root {
  /* Vermelho Pantanal (#F00509 = cor da logo) */
  --brand-50:  #FFF4F2;
  --brand-100: #FEE8E4;
  --brand-200: #FED1CA;
  --brand-300: #FEB0A4;
  --brand-400: #FF8170;
  --brand-450: #FF5A4F;              /* vermelho legível sobre o asfalto (6.2:1) */
  --brand-600: #F00509;              /* cor original da marca: sinal, selo, pulso */
  --brand-650: #D9040A;              /* botão vermelho e faixa de CTA (5.3:1 com branco) */
  --brand-700: #C8040A;              /* vermelho como texto sobre branco (6.0:1) */
  --brand-800: #A00307;
  --brand-rgb: 240, 5, 9;

  /* Asfalto (institucional) */
  --ink-700: #2A2D33;
  --ink-800: #1B1D21;
  --ink-900: #141518;
  --ink-950: #0E0F11;

  /* Neutros frios (concreto e asfalto) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F2F3F5;
  --neutral-100: #EAECEF;
  --neutral-200: #D9DEE5;
  --neutral-300: #C2C7CF;
  --neutral-400: #A7ACB4;
  --neutral-500: #8B9098;
  --neutral-600: #71757D;
  --neutral-700: #595D65;
  --neutral-800: #43474E;
  --neutral-900: #2F3239;

  /* Status (sempre acompanhados de ícone + texto) */
  --status-success: #15803D;
  --status-warning: #B45309;
  --status-danger:  #B91C1C;
  --status-info:    #1D4ED8;
  --status-verified: #1D9BF0;
  --whatsapp: #128C4A;               /* verde WhatsApp com contraste AA para texto branco */
  --whatsapp-hover: #0E7A40;
  --text-on-whatsapp: #FFFFFF;

  /* ---------- TIPOGRAFIA ----------
     Big Shoulders Display 800: letreiro condensado, legível de longe (placa).
     Overpass 400/700: desenhada a partir da Highway Gothic das placas de rodovia. */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:    "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fw-regular: 400;
  --fw-medium: 400;                  /* o site usa só 400 / 700 / 800 */
  --fw-semibold: 700;
  --fw-bold: 700;
  --fw-black: 800;
  --fw-heading: var(--fw-black);

  /* Escala: gigante (h1) · título de seção · subtítulo de item · lead · corpo · rótulo */
  --fs-display: clamp(3rem, 1.9rem + 5.2vw, 6.25rem);
  --fs-h1: clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem);
  --fs-h2: clamp(2.375rem, 1.7rem + 3vw, 4.25rem);
  --fs-h3: clamp(1.625rem, 1.4rem + .9vw, 2.125rem);
  --fs-h4: clamp(1.625rem, 1.4rem + .9vw, 2.125rem);
  --fs-h5: clamp(1.625rem, 1.4rem + .9vw, 2.125rem);
  --fs-lead: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-label: .875rem;

  --lh-tight: .92;
  --lh-heading: .98;
  --lh-body: 1.6;

  --tracking-display: 0;
  --tracking-heading: .005em;
  --tracking-label: 0.14em;

  /* ---------- FORMA (placa: cantos quase retos) ---------- */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 999px;
  --radius-btn: 6px;

  /* ---------- SOMBRAS (tingidas de asfalto) ---------- */
  --shadow-rgb: 14, 15, 17;
  --shadow-xs: 0 1px 2px rgba(var(--shadow-rgb), .08);
  --shadow-sm: 0 2px 8px rgba(var(--shadow-rgb), .10);
  --shadow-md: 0 10px 28px rgba(var(--shadow-rgb), .14);
  --shadow-lg: 0 24px 56px rgba(var(--shadow-rgb), .22);
  --shadow-brand: 0 10px 26px rgba(var(--brand-rgb), .32);

  /* ---------- MOVIMENTO ---------- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 600ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1240px;
  --nav-height: 72px;
  --section-y: clamp(4.5rem, 2.8rem + 6vw, 8rem);
  --section-y-sm: clamp(3rem, 2rem + 3vw, 4.5rem);
  --gap: clamp(1rem, .6rem + 1.2vw, 1.75rem);

  /* ---------- ASSINATURA ----------
     Principal: o selo pulsa como giroflex (anéis).
     Secundária: faixa seccionada da rodovia (tracejado) e rodovias em escudo de placa. */
  --sig-pulso-dur: 2.4s;
  --sig-faixa-traco: 18px;           /* comprimento do traço da faixa */
  --sig-faixa-vao: 14px;             /* vão entre traços */
  --sig-faixa-espessura: 3px;
}

/* ---------- CAMADA 2 — PAPÉIS SEMÂNTICOS ---------- */
:root,
[data-bs-theme="light"] {
  --bg-page:    var(--neutral-0);
  --bg-soft:    var(--neutral-50);     /* seções alternadas (concreto) */
  --bg-tint:    var(--brand-50);
  --bg-card:    var(--neutral-0);
  --bg-inverse: var(--ink-950);        /* asfalto: hero, diferenciais, rodapé */
  --bg-inverse-raised: var(--ink-800); /* superfície sobre o asfalto */
  --bg-brand:   var(--brand-650);      /* faixa de CTA vermelha */

  --text-strong: var(--ink-950);
  --text-body:   var(--neutral-800);
  --text-muted:  var(--neutral-700);
  --text-on-brand:   #FFFFFF;
  --text-on-inverse: #FFFFFF;
  --text-on-inverse-muted: rgba(255, 255, 255, .78);

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-400);
  --border-on-inverse: rgba(255, 255, 255, .16);

  --nav-bg:     var(--ink-950);
  --nav-border: rgba(255, 255, 255, .08);

  --accent:       var(--brand-650);    /* botão vermelho (AA com texto branco) */
  --accent-hover: var(--brand-800);
  --accent-text:  var(--brand-700);    /* vermelho como TEXTO sobre fundo claro */
  --accent-soft:  var(--brand-50);
  --accent-on-inverse: var(--brand-450); /* vermelho legível sobre o asfalto */

  --ink-hover: var(--ink-800);                 /* hover de botão asfalto */
  --avatar-1: var(--brand-650);                /* avatares dos depoimentos (ícone branco ≥ 3:1) */
  --avatar-2: var(--status-info);
  --avatar-3: var(--whatsapp);
  --avatar-4: var(--status-warning);
  --signal: var(--brand-600);          /* vermelho da logo: só sinal (pulso, ponto "ao vivo", faixa) */
  --signal-rgb: var(--brand-rgb);
  --road-line: rgba(255, 255, 255, .22);       /* faixa seccionada sobre o asfalto */
  --road-line-light: var(--neutral-300);       /* faixa seccionada sobre fundo claro */
  --sign-bg: var(--neutral-0);                 /* escudo de rodovia (placa BR) */
  --sign-fg: var(--ink-950);

  --map-land: var(--neutral-0);
  --map-land-around: var(--neutral-100);
  --map-sea: var(--neutral-200);
  --map-border: var(--neutral-400);

  --focus-ring: var(--brand-650);
}

/* ---------- AVALIAÇÃO E CATEGORIAS ---------- */
:root {
  --rating-star: #F5B301;
  --cat-1: #4D7C0F;
  --cat-2: #1D4ED8;
  --cat-3: #C2410C;
  --cat-4: #6D28D9;
  --cat-5: #BE185D;
  --cat-6: #0E7490;
}

/* ---------- PALETA DE ÍCONES ---------- */
:root {
  --icon-1-bg: var(--brand-50);   --icon-1-fg: var(--brand-700);
  --icon-2-bg: var(--neutral-100); --icon-2-fg: var(--ink-950);
  --icon-3-bg: #FEF3C7;           --icon-3-fg: #92400E;
  --icon-4-bg: #E0F2FE;           --icon-4-fg: #075985;
  --icon-5-bg: #FCE7F3;           --icon-5-fg: #9D174D;
}

/* ---------- PONTE COM O BOOTSTRAP 5.3 ---------- */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-font-sans-serif: var(--font-body);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--fs-body);
  --bs-body-line-height: var(--lh-body);
  --bs-body-bg: var(--bg-page);
  --bs-body-color: var(--text-body);
  --bs-emphasis-color: var(--text-strong);
  --bs-heading-color: var(--text-strong);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--border-subtle);
  --bs-link-color: var(--accent-text);
  --bs-link-hover-color: var(--accent-hover);
  --bs-link-color-rgb: 200, 4, 10;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 217, 4, 10;
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-focus-ring-color: color-mix(in srgb, var(--focus-ring) 35%, transparent);
}