/* PetGeo — Design Tokens (fonte da verdade)
 * ------------------------------------------------------------------
 * Derivado de docs/brand/brand-guidelines.md, colors.css e typography.css.
 * As cores da marca são IMUTÁVEIS — só neutros/estados de apoio são adicionados,
 * sempre harmonizando com a paleta e respeitando WCAG AA.
 *
 * Prefixo --pg-* para evitar colisão com estilos legados durante a migração.
 * ------------------------------------------------------------------ */

:root {
  /* === MARCA (extraída do logotipo — não alterar) ================= */
  --pg-bg: #F6F6F3;              /* Fundo/papel — off-white quente */
  --pg-primary: #1B4B56;         /* Petróleo — "Pet", pingente, tagline, CTA/UI */
  --pg-secondary: #636363;       /* Grafite — "Geo", texto/UI neutra */
  --pg-taupe: #84837D;           /* Apoio — tom quente da ilustração */

  /* Variações do primário */
  --pg-primary-700: #143942;     /* hover de botões/links */
  --pg-primary-300: #5E8088;     /* gradientes, elementos secundários */
  --pg-primary-tint: #E7EDEE;    /* fundo de seção/realce sutil */

  /* Acentos */
  --pg-coral: #B4532E;           /* CTA emocional / alerta */
  --pg-coral-700: #9A4427;       /* hover do coral */
  --pg-gold: #C9952C;            /* avisos, badges de atenção, estrelas */

  /* === NEUTROS ==================================================== */
  --pg-ink: #1B2A2E;             /* texto primário — ~13:1 no branco (AAA) */
  --pg-text: #3A4448;            /* corpo de texto — ~9:1 no branco (AAA) */
  --pg-muted: #636363;           /* texto secundário — grafite da marca, ~5.4:1 no fundo (AA) */
  --pg-line: #E2E2DC;            /* bordas/divisórias */
  --pg-surface: #FFFFFF;         /* cards e superfícies limpas */
  --pg-surface-2: #F6F6F3;       /* superfície aninhada (linhas de tabela, blocos) */

  /* Neutros para uso sobre fundo escuro (footer petróleo/ink) */
  --pg-on-dark: #FFFFFF;
  --pg-on-dark-muted: #A7B7B9;   /* ~5.2:1 sobre --pg-ink (AA) */

  /* === ESTADOS (pares acessíveis fundo/texto) ==================== */
  --pg-success: #1B4B56;
  --pg-success-bg: #E7EDEE;
  --pg-success-fg: #143942;      /* ~8:1 sobre success-bg */

  --pg-alert: #B4532E;           /* erros / ações destrutivas */
  --pg-alert-bg: #FBEDE7;
  --pg-alert-fg: #8A3D20;        /* ~5.6:1 sobre alert-bg (AA) */

  --pg-warning: #C9952C;
  --pg-warning-bg: #FBF1DD;
  --pg-warning-fg: #7A5A16;      /* ~5.3:1 sobre warning-bg (AA) */

  /* === FOCO ===================================================== */
  --pg-focus-ring: 0 0 0 3px rgba(27, 75, 86, .35);
  --pg-focus-outline: 2px solid var(--pg-primary);

  /* === GRADIENTES ============================================== */
  --pg-gradient-hero: linear-gradient(150deg, #1B4B56 0%, #143942 100%);
  --pg-gradient-brand: linear-gradient(135deg, #1B4B56 0%, #5E8088 100%);

  /* === TIPOGRAFIA ============================================== */
  --pg-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pg-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala fluida — respeita o guia (desktop → mobile):
     H1 48→32 · H2 36→28 · H3 24→20 · Body 16 · Small 14 · Caption 12 */
  --pg-text-xs: .75rem;          /* 12 / 16 — caption */
  --pg-text-sm: .875rem;         /* 14 / 20 — body small */
  --pg-text-base: 1rem;          /* 16 / 24 — corpo */
  --pg-text-lg: 1.125rem;        /* 18 — lead */
  --pg-h3: clamp(1.25rem, 1.06rem + .95vw, 1.5rem);
  --pg-h2: clamp(1.75rem, 1.3rem + 2.25vw, 2.25rem);
  --pg-h1: clamp(2rem, 1.28rem + 3.6vw, 3rem);
  --pg-display: clamp(2.25rem, 1.4rem + 4.25vw, 3.25rem); /* hero */

  --pg-leading-tight: 1.15;      /* títulos */
  --pg-leading-snug: 1.35;
  --pg-leading-normal: 1.6;      /* corpo */
  --pg-tracking-tight: -.02em;   /* títulos */
  --pg-tracking-wide: .12em;     /* eyebrow/overline */

  /* === ESPAÇAMENTO (base 8px) ================================= */
  --pg-space-2xs: 4px;
  --pg-space-xs: 8px;
  --pg-space-sm: 12px;
  --pg-space-md: 16px;
  --pg-space-lg: 24px;
  --pg-space-xl: 32px;
  --pg-space-2xl: 48px;
  --pg-space-3xl: 64px;
  --pg-space-4xl: 96px;          /* respiro entre seções no desktop */

  /* === RAIO ================================================== */
  --pg-radius-sm: 8px;
  --pg-radius-md: 12px;          /* botões, inputs (spec do guia) */
  --pg-radius-lg: 16px;          /* cards (spec do guia) */
  --pg-radius-xl: 24px;
  --pg-radius-full: 9999px;

  /* === SOMBRA ================================================ */
  --pg-shadow-sm: 0 2px 8px rgba(27, 42, 46, .06);
  --pg-shadow-md: 0 8px 30px rgba(27, 42, 46, .10);
  --pg-shadow-lg: 0 20px 60px rgba(27, 42, 46, .16);

  /* === LAYOUT =============================================== */
  --pg-container: 1140px;
  --pg-container-narrow: 640px;
  --pg-container-pad: 1.5rem;
  --pg-header-h: 72px;

  /* === MOVIMENTO ============================================ */
  --pg-ease: cubic-bezier(.4, 0, .2, 1);
  --pg-duration-fast: .15s;
  --pg-duration: .25s;
}

/* Dark mode: fora de escopo por ora — o guia de marca é totalmente claro.
   Quando for abordado, redefinir SOMENTE os tokens de superfície/neutro aqui,
   guardado como :root:not([data-theme="light"]). Ver docs/brand/MIGRATION.md. */