/**
 * Piron Promocionais — Design Tokens
 * colors_and_type.css
 *
 * Tokens reutilizáveis de cor, tipografia, espaçamento, radius,
 * sombras, breakpoints e estados para a loja virtual B2B da Piron.
 *
 * Baseado em brand.json + context/input-DESIGN.md.
 * Preserva identidade visual existente; não reinicia o branding.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&display=swap');

:root {
  /* ============================================================
     CORES DA MARCA
     ============================================================ */

  /* Primária — Cobre Piron: CTAs, botões primários, conversão */
  --piron-primary: #d95c2b;
  --piron-primary-dark: #b84a1e;
  --piron-primary-soft: #f3d7cc;
  --piron-primary-text-on: #ffffff;

  /* Secundária — Azul Noturno: texto institucional, blocos de credibilidade */
  --piron-secondary: #1f2a37;
  --piron-secondary-light: #3b4a5a;
  --piron-secondary-text-on: #ffffff;

  /* Destaque — Amarelo: selos, números, ênfases pontuais */
  --piron-accent: #f2a900;
  --piron-accent-text-on: #1f2a37;
  --piron-accent-secondary: #3b4a5a;

  /* Fundos e superfícies */
  --piron-background: #faf8f6;
  --piron-surface: #ffffff;
  --piron-surface-alt: #f3f4f6;
  --piron-surface-elevated: #ffffff;

  /* Linhas e divisores */
  --piron-border: #e5e7eb;
  --piron-border-strong: #d5d3d1;

  /* Texto */
  --piron-text: #1f2937;
  --piron-text-soft: #6b7280;
  --piron-text-muted: #8a8887;
  --piron-text-on-dark: #ffffff;

  /* ============================================================
     CORES SEMÂNTICAS / ESTADOS
     ============================================================ */
  --piron-success: #2e8b57;
  --piron-success-bg: #f0fdf4;
  --piron-success-border: #bbf7d0;
  --piron-success-text-on: #ffffff;

  --piron-warning: #f2a900;
  --piron-warning-bg: #fffbeb;
  --piron-warning-border: #fde68a;
  --piron-warning-text-on: #1f2a37;

  --piron-error: #dc2626;
  --piron-error-bg: #fef2f2;
  --piron-error-border: #fecaca;
  --piron-error-text-on: #ffffff;

  --piron-info: #3b4a5a;
  --piron-info-bg: #f1f5f9;
  --piron-info-border: #cbd5e1;

  /* Estados de interação */
  --piron-hover-overlay: rgba(31, 42, 55, 0.04);
  --piron-active-overlay: rgba(31, 42, 55, 0.08);
  --piron-focus-ring: 0 0 0 3px rgba(217, 92, 43, 0.35);
  --piron-disabled-bg: #f3f4f6;
  --piron-disabled-text: #9ca3af;
  --piron-disabled-border: #e5e7eb;

  /* ============================================================
     TIPOGRAFIA
     ============================================================ */
  --piron-font-display: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --piron-font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --piron-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  /* Fonte de impacto para números grandes — quadrada e institucional, como a marca */
  --piron-font-stat: 'DM Sans', Impact, 'Arial Narrow', sans-serif;

  /* Pesos */
  --piron-weight-regular: 400;
  --piron-weight-medium: 500;
  --piron-weight-semibold: 600;
  --piron-weight-bold: 700;

  /* Tamanhos */
  --piron-text-xs: 0.75rem;   /* 12px */
  --piron-text-sm: 0.875rem;  /* 14px */
  --piron-text-base: 1rem;    /* 16px */
  --piron-text-lg: 1.125rem;  /* 18px */
  --piron-text-xl: 1.25rem;   /* 20px */
  --piron-text-2xl: 1.5rem;   /* 24px */
  --piron-text-3xl: 1.875rem; /* 30px */
  --piron-text-4xl: 2.5rem;   /* 40px */
  --piron-text-5xl: 3.5rem;   /* 56px */

  /* Alturas de linha */
  --piron-leading-tight: 1.2;
  --piron-leading-snug: 1.25;
  --piron-leading-normal: 1.5;
  --piron-leading-relaxed: 1.6;
  --piron-leading-display: 1.05;

  /* ============================================================
     ESPAÇAMENTO — baseline 8px
     ============================================================ */
  --piron-space-0: 0;
  --piron-space-1: 0.25rem;   /* 4px */
  --piron-space-2: 0.5rem;    /* 8px */
  --piron-space-3: 0.75rem;   /* 12px */
  --piron-space-4: 1rem;      /* 16px */
  --piron-space-5: 1.25rem;   /* 20px */
  --piron-space-6: 1.5rem;    /* 24px */
  --piron-space-7: 1.75rem;   /* 28px */
  --piron-space-8: 2rem;      /* 32px */
  --piron-space-9: 2.25rem;   /* 36px */
  --piron-space-10: 2.5rem;   /* 40px */
  --piron-space-12: 3rem;     /* 48px */
  --piron-space-14: 3.5rem;   /* 56px */
  --piron-space-16: 4rem;     /* 64px */
  --piron-space-20: 5rem;     /* 80px */
  --piron-space-24: 6rem;     /* 96px */

  /* ============================================================
     RADIUS E BORDAS
     ============================================================ */
  --piron-radius-sm: 8px;
  --piron-radius-md: 12px;
  --piron-radius-lg: 18px;
  --piron-radius-xl: 24px;
  --piron-radius-pill: 999px;
  --piron-border-width: 1px;

  /* ============================================================
     SOMBRAS
     ============================================================ */
  --piron-shadow-sm: 0 2px 8px rgba(31, 42, 55, 0.08);
  --piron-shadow-md: 0 8px 24px rgba(31, 42, 55, 0.10);
  --piron-shadow-lg: 0 18px 40px rgba(31, 42, 55, 0.14);
  --piron-shadow-focus: var(--piron-focus-ring);

  /* ============================================================
     BREAKPOINTS
     ============================================================ */
  --piron-bp-sm: 640px;
  --piron-bp-md: 768px;
  --piron-bp-lg: 1024px;
  --piron-bp-xl: 1280px;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --piron-container-max: 1200px;
  --piron-container-padding: var(--piron-space-4);
  --piron-section-gap: var(--piron-space-20);
  --piron-grid-columns: 12;

  /* ============================================================
     COMPONENTES — valores-base derivados
     ============================================================ */
  --piron-button-height: 52px;
  --piron-button-height-sm: 40px;
  --piron-input-height: 52px;
  --piron-control-radius: var(--piron-radius-pill);
  --piron-card-radius: var(--piron-radius-lg);
  --piron-card-padding: var(--piron-space-6);

  /* ============================================================
     MOVIMENTO
     ============================================================ */
  --piron-duration-fast: 0.1s;
  --piron-duration-base: 0.2s;
  --piron-duration-slow: 0.3s;
  --piron-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --piron-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* ============================================================
   RESET MÍNIMO E ESTILOS BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: var(--piron-font-body);
  font-size: 16px;
  line-height: var(--piron-leading-relaxed);
  color: var(--piron-text);
  background-color: var(--piron-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  max-width: 100%;
}

/* Tipografia base */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--piron-font-display);
  font-weight: var(--piron-weight-bold);
  line-height: var(--piron-leading-tight);
  margin: 0 0 var(--piron-space-4);
  color: var(--piron-secondary);
}

h1 { font-size: var(--piron-text-4xl); line-height: var(--piron-leading-display); }
h2 { font-size: var(--piron-text-3xl); line-height: 1.12; }
h3 { font-size: var(--piron-text-2xl); font-weight: var(--piron-weight-semibold); }
h4 { font-size: var(--piron-text-xl); font-weight: var(--piron-weight-semibold); }
h5 { font-size: var(--piron-text-lg); font-weight: var(--piron-weight-semibold); }
h6 { font-size: var(--piron-text-base); font-weight: var(--piron-weight-semibold); }

p {
  margin: 0 0 var(--piron-space-4);
}

a {
  color: var(--piron-secondary-light);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--piron-duration-base) var(--piron-ease-out);
}

a:hover {
  color: var(--piron-primary);
}

a:focus-visible {
  outline: none;
  border-radius: var(--piron-radius-sm);
  box-shadow: var(--piron-shadow-focus);
}

/* Foco genérico */
:focus-visible {
  outline: none;
  box-shadow: var(--piron-shadow-focus);
}

/* Listas */
ul, ol {
  margin: 0 0 var(--piron-space-4);
  padding-left: var(--piron-space-6);
}

/* ============================================================
   UTILITÁRIOS DE ESTADO
   ============================================================ */
.piron-surface {
  background-color: var(--piron-surface);
}

.piron-surface-alt {
  background-color: var(--piron-surface-alt);
}

.piron-text-muted {
  color: var(--piron-text-soft);
}

.piron-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}