/*
 * design-tokens.css — OnixFlow
 * Variáveis CSS para reuso em todo material da marca.
 * Importe este arquivo antes de qualquer stylesheet do projeto.
 * Fonte da verdade: onixflow-manual-marca.html
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {

  /* ─────────────────────────────────────────────
     CORES — Camada de marca
     Onix + dourado = personalidade e impacto
     ───────────────────────────────────────────── */

  --color-ink:          #16120D; /* Onix — texto principal, fundos de impacto, momentos premium */
  --color-ink-soft:     #3C362C; /* Onix atenuado — texto secundário sobre claro */
  --color-ink-mute:     #6E6655; /* Onix suave — legendas, metadados */

  --color-gold:         #C9A45C; /* Dourado — cor de marca, destaques gráficos (NUNCA como texto sobre claro) */
  --color-gold-deep:    #8C6A2F; /* Dourado profundo — dourado quando vira texto sobre fundo claro */
  --color-gold-light:   #E9CD92; /* Dourado claro — dourado sobre fundo Onix/escuro */

  --grad-gold: linear-gradient(135deg, #EBD09A 0%, #C9A45C 45%, #9C7434 100%);


  /* ─────────────────────────────────────────────
     CORES — Camada funcional
     Off-white + azul-tinta = dia a dia e interface
     ───────────────────────────────────────────── */

  --color-bg:           #F3EEE4; /* Off-white quente — base do dia a dia (60% do uso) */
  --color-bg-alt:       #EAE2D2; /* Off-white 2 — variação de fundo, blocos e divisórias */
  --color-bg-paper:     #FBF8F1; /* Off-white mais claro — cards e superfícies elevadas */

  --color-func:         #23456E; /* Azul-tinta — botões, links, gráficos, ações (fundo claro) */
  --color-func-light:   #8FB0DE; /* Azul-tinta claro — azul-tinta sobre fundo escuro */

  --color-line:         #DCD2BE; /* Linha clara — bordas e divisórias sobre fundo claro */
  --color-line-dark:    #2C2820; /* Linha escura — bordas e divisórias sobre fundo Onix */


  /* ─────────────────────────────────────────────
     TIPOGRAFIA — Famílias
     ───────────────────────────────────────────── */

  --font-display: 'Poppins', system-ui, sans-serif; /* Voz da marca: logo, títulos, rótulos */
  --font-body:    'Inter',   system-ui, sans-serif; /* Texto corrido: corpo, propostas, interface */


  /* ─────────────────────────────────────────────
     TIPOGRAFIA — Escala (tamanho / altura de linha / peso)
     ───────────────────────────────────────────── */

  /* H1 — Poppins SemiBold */
  --text-h1-size:   clamp(32px, 5vw, 44px);
  --text-h1-line:   1.18;  /* ~52px */
  --text-h1-weight: 600;

  /* H2 — Poppins SemiBold */
  --text-h2-size:   clamp(22px, 3.5vw, 30px);
  --text-h2-line:   1.27;  /* ~38px */
  --text-h2-weight: 600;

  /* H3 — Poppins SemiBold */
  --text-h3-size:   20px;
  --text-h3-line:   1.4;   /* ~28px */
  --text-h3-weight: 600;

  /* Lead — Inter Regular */
  --text-lead-size:   16px;
  --text-lead-line:   1.625; /* 26px */
  --text-lead-weight: 400;

  /* Corpo — Inter Regular */
  --text-body-size:   15px;
  --text-body-line:   1.6;   /* 24px */
  --text-body-weight: 400;

  /* Legenda — Poppins Medium */
  --text-caption-size:   12px;
  --text-caption-line:   1.5;  /* 18px */
  --text-caption-weight: 500;

  /* Rótulo — Poppins SemiBold, CAIXA ALTA */
  --text-label-size:    11px;
  --text-label-spacing: 0.2em;
  --text-label-weight:  600;


  /* ─────────────────────────────────────────────
     ESPAÇAMENTO — Escala de 4px
     ───────────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;


  /* ─────────────────────────────────────────────
     BORDAS E RAIOS
     ───────────────────────────────────────────── */

  --radius-sm:  8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --border-light: 1px solid var(--color-line);
  --border-dark:  1px solid var(--color-line-dark);


  /* ─────────────────────────────────────────────
     SOMBRAS
     ───────────────────────────────────────────── */

  --shadow-card:   0 10px 30px -18px rgba(60, 48, 24, 0.22);
  --shadow-board:  0 24px 60px -30px rgba(60, 48, 24, 0.25);
  --shadow-subtle: 0  2px  8px  -2px rgba(60, 48, 24, 0.10);


  /* ─────────────────────────────────────────────
     ANIMAÇÃO
     ───────────────────────────────────────────── */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;


  /* ─────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────── */

  --max-width:     1080px;
  --gutter:           28px;
  --gutter-mobile:    20px;
}


/* ─────────────────────────────────────────────
   RESET MÍNIMO
   ───────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  -webkit-font-smoothing: antialiased;
}

/* Foco de teclado visível — obrigatório em todos os arquivos */
:focus-visible {
  outline: 2px solid var(--color-func);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respeitar preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ─────────────────────────────────────────────
   UTILITÁRIOS TIPOGRÁFICOS
   Classes prontas para reuso em qualquer arquivo
   ───────────────────────────────────────────── */

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

.text-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  font-weight: var(--text-h1-weight);
  letter-spacing: 0.01em;
}

.text-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  font-weight: var(--text-h2-weight);
  letter-spacing: 0.01em;
}

.text-h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  font-weight: var(--text-h3-weight);
}

.text-lead {
  font-family: var(--font-body);
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-line);
  font-weight: var(--text-lead-weight);
}

.text-body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: var(--text-body-weight);
}

.text-caption {
  font-family: var(--font-display);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-caption-weight);
}

.text-label {
  font-family: var(--font-display);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-spacing);
  text-transform: uppercase;
}

/* Cores de texto utilitárias */
.color-ink       { color: var(--color-ink); }
.color-ink-soft  { color: var(--color-ink-soft); }
.color-ink-mute  { color: var(--color-ink-mute); }
.color-gold      { color: var(--color-gold-deep); } /* sempre usa o profundo para texto */
.color-func      { color: var(--color-func); }


/* ─────────────────────────────────────────────
   CONTAINER
   ───────────────────────────────────────────── */

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (max-width: 600px) {
  .container {
    padding-inline: var(--gutter-mobile);
  }
}