/*
 * Design tokens. Toda cor do sistema nasce aqui: para mudar a paleta, altere os primitivos; para mudar o papel de uma
 * cor, altere o token semântico. As demais folhas usam só os tokens semânticos, e DesignTokensTests recusa cor fixa nelas.
 */
:root {
  /* Primitivos: a paleta da logo */
  --wine-900: #4d0709;
  --wine-800: #66090d;
  --wine-700: #7d1418;
  --wine-500: #a23a3e;
  --wine-300: #c78f8b;
  --cream-50: #fffbf6;
  --cream-100: #fbf5ee;
  --cream-200: #f7ebdd;
  --cream-300: #ecdccf;
  --cream-400: #dcc8b8;
  --cream-500: #c4ab9a;
  --stone-900: #2e1213;
  --stone-700: #4f3a38;
  --stone-500: #75605a;
  --stone-400: #85716b;
  --white: #fff;

  /* Primitivos: estados, fora da paleta porque carregam significado */
  --green-700: #526844;
  --green-600: #627851;
  --green-100: #edf3e9;
  --amber-800: #6b5513;
  --amber-300: #e3cf9a;
  --amber-100: #fff9e8;
  --red-700: #9a3342;
  --red-100: #fff4f4;
  --lilac-600: #806b84;
  --lilac-100: #f0eaf1;

  /* Texto */
  --ink: var(--stone-900);
  --ink-soft: var(--stone-700);
  --muted: var(--stone-500);
  --muted-soft: var(--stone-400);
  --on-accent: var(--white);
  --on-inverse: var(--cream-50);
  --on-inverse-muted: var(--cream-400);

  /* Superfícies */
  --paper: var(--cream-100);
  --card: var(--cream-50);
  --surface-soft: var(--cream-200);
  --surface-strong: var(--cream-300);
  --surface-inverse: var(--wine-900);
  --surface-inverse-raised: var(--wine-800);
  --surface-white: var(--white);

  /* Linhas */
  --line: var(--cream-300);
  --line-strong: var(--cream-400);
  --line-stronger: var(--cream-500);

  /* Acento */
  --accent: var(--wine-700);
  --accent-strong: var(--wine-900);
  --accent-bright: var(--wine-500);
  --accent-muted: var(--wine-300);
  --accent-soft: var(--cream-200);

  /* Estados */
  --success: var(--green-600);
  --success-strong: var(--green-700);
  --success-soft: var(--green-100);
  --warning: var(--amber-800);
  --warning-line: var(--amber-300);
  --warning-soft: var(--amber-100);
  --danger: var(--red-700);
  --danger-soft: var(--red-100);
  --info: var(--lilac-600);
  --info-soft: var(--lilac-100);

  /* Transparências */
  --focus-ring: #a23a3ea8;
  --accent-tint: #7d141820;
  --scrim: #4d0709de;
  --inverse-hover: #fffbf61c;
  --inverse-line: #f7ebdd1f;
  --inverse-line-strong: #f7ebdd70;
  --shadow-color-soft: #2e121306;
  --shadow-color: #2e121310;
  --shadow-color-strong: #2e121355;

  /* Cores base do Bootstrap: tabelas, código e corpo leem estas variáveis */
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-code-color: var(--wine-700);

  /* Links do Bootstrap: os componentes dele leem estas variáveis, e a segunda precisa de canais separados */
  --bs-link-color: var(--wine-700);
  --bs-link-color-rgb: 125,20,24;
  --bs-link-hover-color: var(--wine-900);
  --bs-link-hover-color-rgb: 77,7,9;

  /* Tipografia e sombra */
  --shadow: 0 16px 48px var(--shadow-color);
  --serif: Georgia,"Times New Roman",serif;
  --sans: system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}