/*
 * tokens.css — Design tokens do Tarivelo
 *
 * Este arquivo é a fonte da verdade para todas as decisões visuais do sistema.
 * Cores, espaçamentos, tipografia e sombras são definidos aqui como variáveis CSS
 * e consumidos pelos demais arquivos (base.css, components.css, templates).
 *
 * Princípio: nenhum valor "mágico" (hex literal, px literal) nos outros arquivos —
 * tudo referencia um token definido aqui.
 */

:root {

  /* ─────────────────────────────────────────
   * PALETA PRIMÁRIA — Verde sálvia
   * Tom central da identidade: sereno, natural, confiável.
   * Escala do mais claro (50) ao mais escuro (900).
   * ───────────────────────────────────────── */
  --color-primary-50:  #f0f4f1;
  --color-primary-100: #d6e2d8;
  --color-primary-200: #b8ccbc;
  --color-primary-300: #93afa0;
  --color-primary-400: #769287;
  --color-primary-500: #5a7a6a; /* verde sálvia profundo — cor base da identidade */
  --color-primary-600: #4d6a5b;
  --color-primary-700: #3d5749; /* versão mais escura para texto sobre fundo claro */
  --color-primary-800: #2d4136;
  --color-primary-900: #1f2e26;

  /* ─────────────────────────────────────────
   * NEUTROS QUENTES
   * Escala de fundos, superfícies e bordas.
   * Quentes (tons levemente amarelados/bege) para evitar o frio azulado padrão.
   * ───────────────────────────────────────── */
  --color-bg:               #faf8f5; /* fundo principal — off-white quente */
  --color-surface:          #f0ede8; /* superfície secundária — seções, áreas internas */
  --color-surface-elevated: #ffffff; /* cards e elementos elevados */
  --color-border:           #e0dcd5; /* bordas suaves — quase invisíveis */
  --color-border-strong:    #c8c3bb; /* borda mais visível quando necessário */

  /* ─────────────────────────────────────────
   * TEXTO
   * Hierarquia em 3 níveis: principal, secundário, terciário.
   * Todos com temperatura quente (não azulado).
   * ───────────────────────────────────────── */
  --color-text:        #2a2a28; /* texto principal — quase-preto quente */
  --color-text-muted:  #6b6b68; /* texto secundário — rótulos, legendas */
  --color-text-subtle: #9a9a96; /* texto terciário — placeholders, estados vazios */

  /* ─────────────────────────────────────────
   * CORES FUNCIONAIS
   * Saturação propositalmente baixa: sinalizam sem alarmar.
   * Marina tem TDAH — cores gritantes aumentam carga cognitiva.
   * ───────────────────────────────────────── */
  --color-success:          #7a8c6e; /* verde musgo — confirmação, concluído */
  --color-success-bg:       #eef1eb;
  --color-warning:          #b89455; /* âmbar dessaturado — atenção, prazo próximo */
  --color-warning-bg:       #f7f0e3;
  --color-critical:         #a85a4a; /* terracota — vencido, urgente */
  --color-critical-bg:      #f5ebe9;

  /* ─────────────────────────────────────────
   * ESPAÇAMENTOS
   * Escala multiplicativa aproximada de 1.5x.
   * Generous por design — respiro é parte da identidade.
   * ───────────────────────────────────────── */
  --space-2xs: 0.25rem;  /*  4px */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2.25rem;  /* 36px */
  --space-2xl: 3.5rem;   /* 56px */
  --space-3xl: 5rem;     /* 80px */

  /* ─────────────────────────────────────────
   * TIPOGRAFIA — Tamanhos
   * Base em 17px (levemente acima do padrão 16px).
   * Conforto de leitura para sessões longas.
   * ───────────────────────────────────────── */
  --text-xs:   0.875rem;  /* 14px — rótulos muito pequenos */
  --text-sm:   1rem;      /* 16px — texto de interface menor */
  --text-base: 1.0625rem; /* 17px — corpo de texto padrão */
  --text-lg:   1.25rem;   /* 20px — texto levemente destacado */
  --text-xl:   1.5rem;    /* 24px — subtítulos */
  --text-2xl:  2rem;      /* 32px — títulos de seção */
  --text-3xl:  2.625rem;  /* 42px — títulos grandes */
  --text-4xl:  3.5rem;    /* 56px — saudação principal */

  /* ─────────────────────────────────────────
   * TIPOGRAFIA — Famílias e pesos
   * Fraunces: personalidade nos títulos (serifa óptica variável).
   * Plus Jakarta Sans: clareza no corpo e interface.
   * ───────────────────────────────────────── */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Plus Jakarta Sans', system-ui, sans-serif;

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ─────────────────────────────────────────
   * TIPOGRAFIA — Entrelinhas
   * ───────────────────────────────────────── */
  --leading-tight:  1.2;  /* títulos */
  --leading-snug:   1.4;  /* subtítulos */
  --leading-normal: 1.65; /* corpo de texto */

  /* ─────────────────────────────────────────
   * BORDAS E RAIOS
   * Suaves — sem cantos retos (fria) nem bolhas (infantil).
   * ───────────────────────────────────────── */
  --radius-sm: 0.375rem; /*  6px */
  --radius-md: 0.625rem; /* 10px */
  --radius-lg: 1rem;     /* 16px */
  --radius-xl: 1.5rem;   /* 24px */

  /* ─────────────────────────────────────────
   * SOMBRAS
   * Mínimas e quentes — profundidade sutil sem dramatismo.
   * ───────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(42, 42, 40, 0.04);
  --shadow-md: 0 2px 8px rgba(42, 42, 40, 0.06), 0 1px 2px rgba(42, 42, 40, 0.04);
  --shadow-lg: 0 4px 16px rgba(42, 42, 40, 0.08), 0 2px 4px rgba(42, 42, 40, 0.04);

  /* ─────────────────────────────────────────
   * TRANSIÇÕES
   * Rápidas e suaves — feedback imediato sem animação decorativa.
   * ───────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* ─────────────────────────────────────────
   * LAYOUT
   * ───────────────────────────────────────── */
  --container-max-width: 800px;
  --container-padding-x: var(--space-lg);
  --container-padding-y: var(--space-2xl);
}