/* ==========================================================================
   MegaBloko — Design Tokens
   Arquétipo: Técnico-blueprint · Personalidade: técnico-robusto
   Origem: logo (teal #0E5254 + âmbar #E8912A) + conteúdo (venda técnica B2B)
   Ver design-system.md para regra de uso (do/don't) de cada token.
   ========================================================================== */

:root {
  /* ---- Cor · marca ------------------------------------------------- */
  --color-bg-brand: #0E5254;          /* fundo escuro / marca (hero, faixas, rodapé) */
  --color-surface-brand-1: #12676A;   /* superfície elevada sobre teal (tint +5%) */
  --color-surface-brand-2: #157D80;   /* superfície elevada 2 / hover sobre teal (tint +10%) */

  --color-bg: #F6F4F0;                /* fundo claro (base da página) */
  --color-surface: #FFFFFF;           /* superfície clara (cards) */
  --color-surface-2: #EDEAE3;         /* superfície clara 2 (zebra/hover sutil) */

  --color-concrete: #BDBBB6;          /* neutro do produto real */
  --color-concrete-dark: #8F8D87;     /* bordas/divisores */

  /* ---- Cor · texto ---------------------------------------------------- */
  --color-ink: #12201F;               /* texto principal sobre claro */
  --color-ink-muted: #5B6C6A;         /* texto secundário sobre claro */
  --color-on-brand: #FFFFFF;          /* texto principal sobre escuro */
  --color-on-brand-muted: #B9D2D1;    /* texto secundário sobre escuro */

  /* ---- Cor · acento (dose de assinatura, nunca em bloco) -------------- */
  --color-accent: #E8912A;
  --color-accent-hover: #C97716;
  --color-on-accent: #12201F;         /* texto sobre âmbar é SEMPRE ink — nunca branco (falha AA) */

  /* ---- Cor · estados ---------------------------------------------------- */
  --color-success: #256B45;
  --color-danger: #B5432F;
  --color-focus: #E8912A;             /* outline de foco reaproveita o acento */

  /* ---- Sombra (sempre tintada de teal, nunca preto puro) --------------- */
  --shadow-sm: 0 1px 2px rgba(14, 82, 84, .08);
  --shadow-md: 0 4px 12px rgba(14, 82, 84, .12);
  --shadow-lg: 0 12px 32px rgba(14, 82, 84, .16);

  /* ---- Tipografia · famílias ------------------------------------------- */
  --font-display: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  /* ---- Tipografia · escala (desktop; usar clamp() para reduzir em mobile) */
  --text-display: clamp(2.75rem, 2rem + 3.2vw, 4.5rem);
  --text-h1: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);
  --text-h2: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --text-h3: 1.5rem;
  --text-h4: 1.125rem;
  --text-lead: 1.25rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-mono: 0.8125rem;
  --text-eyebrow: 0.75rem;

  --leading-display: 1.02;
  --leading-h1: 1.08;
  --leading-h2: 1.15;
  --leading-h3: 1.2;
  --leading-h4: 1.3;
  --leading-lead: 1.5;
  --leading-body: 1.65;
  --leading-mono: 1.4;
  --leading-eyebrow: 1.2;

  --tracking-display: -0.02em;
  --tracking-h1: -0.01em;
  --tracking-h2: -0.01em;
  --tracking-mono: 0.01em;
  --tracking-eyebrow: 0.14em;

  --weight-display: 900;
  --weight-h1: 800;
  --weight-h2: 800;
  --weight-h3: 700;
  --weight-h4: 700;
  --weight-lead: 500;
  --weight-body: 400;
  --weight-body-medium: 500;
  --weight-body-semibold: 600;
  --weight-mono: 500;
  --weight-mono-strong: 600;

  /* ---- Espaço (base 4px) ------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Grid / container -------------------------------------------------- */
  --container-max: 1280px;
  --container-pad: var(--space-6);
  --container-pad-desktop: var(--space-12);
  --grid-gutter: var(--space-6);
  --grid-line-color: rgba(143, 141, 135, .08); /* --color-concrete-dark a 8% */

  /* ---- Raio (pequeno em tudo — precisão de corte, não orgânico) -------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-full: 999px; /* só tag/pill de filtro */

  /* ---- Movimento --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-linear: linear;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 250ms;
  --duration-hero-draw: 1100ms;

  /* ---- Filete / assinatura ------------------------------------------------ */
  --accent-rule-width: 2px;
}

/* ==========================================================================
   Reset tipográfico mínimo de apoio (opcional — o front-end final define o seu)
   ========================================================================== */
.ds-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono-strong);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.ds-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.ds-mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-mono);
  line-height: var(--leading-mono);
  letter-spacing: var(--tracking-mono);
}