/* =========================================================================
   Rino Marketing Digital — Design Tokens
   v1.0.0 · 2026-06-03
   Fonte unica de verdade da identidade. Importe este arquivo em qualquer
   peca web e use as variaveis (nunca hex soltos).
   ========================================================================= */

:root {
  /* ---- Cores · Marca -------------------------------------------------- */
  --rino-laranja:        #F09818;  /* ACENTO DA AGENCIA (do video oficial) — laranja queimado, conceito selva/africa */
  --rino-laranja-escuro: #D17F0C;  /* hover / contraste sobre claro */
  --rino-laranja-claro:  #F8B23E;  /* realces, gradientes quentes */
  --rino-amarelo:        #F9BE26;  /* cor do logotipo (wordmark rino) */
  --rino-amarelo-escuro: #E0A413;  /* hover / contraste sobre claro */
  --rino-amarelo-claro:  #FFD45E;  /* realces, tints */
  --rino-grafite:        #3F3E40;  /* primaria escura */
  --rino-grafite-deep:   #2A2A2C;  /* fundos profundos */
  --rino-grafite-soft:   #57565A;  /* texto secundario */

  /* ---- Cores · Neutras ------------------------------------------------ */
  --rino-branco:    #FFFFFF;
  --rino-areia:     #FAF8F3;  /* off-white quente — fundo padrao */
  --rino-cinza-100: #F2F0EB;
  --rino-cinza-200: #D8D6D0;
  --rino-cinza-400: #8A898E;

  /* ---- Cores · Feedback ---------------------------------------------- */
  --rino-sucesso: #2E9E5B;
  --rino-atencao: #E0A413;
  --rino-erro:    #D24545;

  /* ---- Tipografia ----------------------------------------------------- */
  --font-display: 'Poppins', 'Trebuchet MS', system-ui, sans-serif;
  --font-texto:   'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-display-xl: 4.5rem;   /* 72 */
  --fs-display:    3rem;     /* 48 */
  --fs-h1:         2.25rem;  /* 36 */
  --fs-h2:         1.75rem;  /* 28 */
  --fs-h3:         1.25rem;  /* 20 */
  --fs-body:       1rem;     /* 16 */
  --fs-small:      .875rem;  /* 14 */
  --fs-label:      .8125rem; /* 13 */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.6;
  --ls-label: .12em;
  --ls-tight: -.02em;

  /* ---- Espacamento (base 4) ------------------------------------------ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  /* ---- Raios ---------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Sombras -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(42,42,44,.08);
  --shadow-md: 0 8px 24px rgba(42,42,44,.10);
  --shadow-lg: 0 20px 60px rgba(42,42,44,.16);
}