/* ============================================================================
   tokens.css — variáveis da marca Harmon IA
   Paleta crua + tokens semânticos. O tema escuro (theme.css) só troca os
   tokens semânticos; nenhum componente referencia cor crua direto.
   ============================================================================ */

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* -------- paleta crua v2 — rosé/mauve (ref. "Coursue") -------- */
  --color-black:    #181818;   /* quase-preto, 100% neutro (R=G=B) */
  --color-white:    #ffffff;
  --color-gray-100: #f4f4f4;   /* fundo geral */
  --color-gray-150: #e6e6e6;   /* fundo da tela de login */
  --color-gray-200: #ebebeb;
  --color-gray-400: #767676;   /* 4.54:1 sobre branco — mínimo AA texto normal */
  --color-gray-600: #666666;   /* 5.74:1 sobre branco */

  /* rosé/mauve — cor de FUNDO e GRÁFICO, nunca de texto de corpo */
  --color-mauve-100: #ececec;  /* pill/badge suave */
  --color-mauve-300: #cfcfcf;  /* gradiente banner, ponta clara / chip */
  --color-mauve-500: #a3a3a3;  /* gradiente banner, ponta escura / barras */
  --color-mauve-700: #6b6b6b;

  --color-success:  #4a7c59;
  --color-warning:  #c9923a;
  --color-danger:   #b85450;

  /* pills de categoria (pastéis) — texto escurecido p/ contraste AA */
  --pill-blue-bg:  #e3f1fc;  --pill-blue-text:  #2c6690;
  --pill-tan-bg:   #f3e9e0;  --pill-tan-text:   #7a5f4a;
  --pill-peach-bg: #f7e9de;  --pill-peach-text: #a35a35;

  /* -------- tokens semânticos (tema claro = padrão) -------- */
  --bg:            var(--color-gray-100);
  --surface:       var(--color-white);
  --surface-2:     var(--color-gray-100);
  /* trilho dos toggles (.segmented): 1 tom mais escuro que --bg p/ o
     container ser sempre visível, inclusive na página cinza. */
  --segment-track: var(--color-gray-150);
  --text:          var(--color-black);
  --text-muted:    var(--color-gray-600);
  --text-faint:    var(--color-gray-400);
  --border:        var(--color-gray-200);
  --border-strong: var(--color-gray-400);
  --accent:        var(--color-mauve-300);
  --accent-text:   var(--color-black);

  /* botões primários: fundo escuro, texto branco (17:1) */
  --btn-primary-bg:   var(--color-black);
  --btn-primary-text: var(--color-white);
  /* botões secundários: mauve suave, texto escuro */
  --btn-secondary-bg:   var(--color-mauve-100);
  --btn-secondary-text: var(--color-black);

  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger:  var(--color-danger);
  /* cor de marca do WhatsApp — dissociada de --success (semântica financeira) */
  --whatsapp: #4a7c59;

  /* sobre fundo claro, versões suaves para badges */
  --success-soft: #e7efe9;
  --warning-soft: #f6ecd9;
  --danger-soft:  #f4e3e2;

  /* -------- tipografia — Satoshi (variável, 300–900), fallback de sistema -------- */
  --font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* pesos recalibrados p/ fonte de sistema (nunca acima de 700) */
  --fw-200: 400;
  --fw-300: 400;   /* corpo — 300 ficava fino demais fora da Raleway */
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  --fs-xs:   0.75rem;
  --fs-sm:   0.85rem;
  --fs-base: 1rem;
  --fs-lg:   1.15rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2.5rem;

  /* -------- espaçamento (escala de 4px) -------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* -------- forma -------- */
  --radius:    8px;     /* arredondamento padrão dos cards */
  --radius-sm: 6px;
  --radius-lg: 14px;
  --radius-xl: 20px;    /* cards grandes: banner, painel direito, home */
  --radius-pill: 999px;

  /* sombras sutis, nunca pesadas */
  --shadow-sm: 0 1px 2px rgba(26, 26, 24, 0.04);
  --shadow:    0 4px 16px rgba(26, 26, 24, 0.08);

  --sidebar-w: 272px;
  --sidebar-w-collapsed: 64px;
  --header-h: 68px;
  --tabbar-h: 64px;   /* barra de abas mobile (≤900px) */

  /* header da landing: fundo semitransparente + blur ao rolar */
  --header-bg: rgba(255, 255, 255, 0.72);
  --header-blur: 12px;

  /* scrim escuro sobre a imagem do hero full-bleed — texto branco legível (AA) */
  --hero-overlay-strong: rgb(from var(--color-black) r g b / 0.72);
  --hero-overlay-soft:   rgb(from var(--color-black) r g b / 0.05);
  --hero-text-muted:     rgb(from var(--color-white) r g b / 0.85);
  --hero-border:         rgb(from var(--color-white) r g b / 0.4);

  /* -------- motion -------- */
  /* hovers/estados: ease genérico e rápido; entradas de overlay: ease-out com
     desaceleração natural; saídas sempre mais curtas que entradas */
  --transition: 160ms ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 200ms;
  --dur-exit: 150ms;

  /* -------- acessibilidade / overlays -------- */
  /* anel de foco: acompanha a cor de destaque (accent.css redefine mauve-700);
     todos os tons 700 têm ≥3:1 sobre branco (mínimo WCAG p/ indicador de UI) */
  --focus-ring: 2px solid var(--color-mauve-700);
  --overlay-bg: rgba(26, 26, 24, 0.45);
  --switch-thumb: var(--color-white);
}