/*
  Design tokens — 1:1 com design_handoff_landing_csi/README.md e Landing CSI.dc.html
  Nenhuma cor/tamanho deve aparecer solto em styles.css: sempre via var(--token).
*/
:root {
  /* Cores */
  --color-petroleo-900: #0C2F38;
  --color-petroleo-700: #14505E;
  --color-ambar: #E9A13B;
  --color-ambar-hover: #D8912D;
  --color-ambar-texto: #22160A;
  --color-creme-fundo: #F4F3EE;
  --color-creme-surface: #FFFDF9;
  --color-branco: #FFFFFF;
  --color-linha: #E4E1D7;
  --color-linha-input: #DCD9CE;
  --color-linha-forte: #CFCDC0;
  --color-texto: #0F1D22;
  --color-texto-medio: #3F4C50;
  --color-texto-suave: #5B6A6D;
  --color-texto-corpo-hero: #4B585C;
  --color-mono-label: #6E7A70;
  --color-card-icone-bg: #EEF1EE;
  --color-badge-placeholder-bg: #FBF2E1;
  --color-badge-placeholder-fg: #A0761F;
  --color-card-hover-border: #C6D0CF;
  --color-divider-testemunho: #EAE7DD;
  --color-avatar-stripe: #E9E6DC;

  /* Estados de erro do formulário (não fazem parte da paleta original do hi-fi,
     adicionados para os estados faltantes pedidos no handoff) */
  --color-erro: #C0402B;
  --color-erro-bg: #FBEAE6;
  --color-erro-border: #E3B7AC;
  --color-erro-texto: #7A2A1A;

  /* Texto/superfícies sobre fundo escuro (petroleo-900), rgba base 255,253,249 */
  --on-dark-92: rgba(255, 253, 249, 0.92);
  --on-dark-90: rgba(255, 253, 249, 0.9);
  --on-dark-86: rgba(255, 253, 249, 0.86);
  --on-dark-78: rgba(255, 253, 249, 0.78);
  --on-dark-74: rgba(255, 253, 249, 0.74);
  --on-dark-72: rgba(255, 253, 249, 0.72);
  --on-dark-68: rgba(255, 253, 249, 0.68);
  --on-dark-62: rgba(255, 253, 249, 0.62);
  --on-dark-55: rgba(255, 253, 249, 0.55);
  --on-dark-50: rgba(255, 253, 249, 0.5);
  --on-dark-40: rgba(255, 253, 249, 0.4);
  --on-dark-14: rgba(255, 253, 249, 0.14);
  --on-dark-10: rgba(255, 253, 249, 0.1);
  --on-dark-07: rgba(255, 253, 249, 0.07);
  --badge-ambar-85: rgba(233, 161, 59, 0.85);
  --badge-ambar-90: rgba(233, 161, 59, 0.9);
  --badge-ambar-80: rgba(233, 161, 59, 0.8);

  /* Tipografia */
  --font-heading: 'Manrope', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --size-h1-hero: clamp(36px, 5.4vw, 62px);
  --size-h2-secao: clamp(28px, 3.4vw, 44px);
  --size-h2-captacao: clamp(26px, 3vw, 40px);
  --size-h2-depoimentos: clamp(24px, 2.6vw, 34px);
  --size-h3-card: 20px;
  --size-h3-diferencial: 19px;
  --size-h3-sucesso: 24px;
  --size-h3-form: 21px;
  --size-citacao: 18px;
  --size-sub-hero: clamp(16px, 1.4vw, 19px);
  --size-corpo: 16px;
  --size-corpo-sm: 15px;
  --size-label-campo: 13px;
  --size-nota-legal: 12px;
  --size-indicador: clamp(32px, 3.4vw, 44px);
  --size-eyebrow: 11px;
  --size-eyebrow-sm: 10px;

  /* Layout */
  --container-max: 1240px;
  --container-padding-x: clamp(18px, 4vw, 44px);
  --section-padding-y: clamp(72px, 9vw, 128px);
  --hero-padding-top: clamp(124px, 13vw, 168px);
  --hero-padding-bottom: clamp(56px, 7vw, 96px);

  /* Raios */
  --radius-pill: 999px;
  --radius-btn-sm: 12px;
  --radius-btn: 13px;
  --radius-btn-lg: 14px;
  --radius-icon: 13px;
  --radius-card: 22px;
  --radius-md: 18px;
  --radius-lg: 20px;
  --radius-hero-photo: 26px;
  --radius-captacao: clamp(24px, 2.6vw, 34px);
  --radius-form-card: clamp(20px, 2.2vw, 26px);

  /* Sombras */
  --shadow-card: 0 1px 2px rgba(12, 47, 56, 0.03);
  --shadow-card-hover: 0 18px 34px -26px rgba(12, 47, 56, 0.45);
  --shadow-cta-ambar: 0 12px 26px -12px rgba(233, 161, 59, 0.85);
  --shadow-cta-ambar-lg: 0 12px 26px -14px rgba(233, 161, 59, 0.9);
  --shadow-header-cta: 0 6px 16px -8px rgba(233, 161, 59, 0.8);
  --shadow-hero-photo: 0 30px 60px -40px rgba(12, 47, 56, 0.4);
  --shadow-floating-card: 0 20px 40px -22px rgba(12, 47, 56, 0.55);
  --shadow-form: 0 30px 60px -34px rgba(0, 0, 0, 0.5);
  --shadow-whatsapp: 0 14px 30px -12px rgba(12, 47, 56, 0.55);
  --shadow-focus-ring: 0 0 0 3px rgba(20, 80, 94, 0.12);

  --transition-base: 150ms ease;
}