/* Fundação de design: paleta, tipografia e espaçamento do app, em tokens --
   usados pelos outros CSS em vez de valores soltos. Identidade meajudaí
   (docs/marca/INSTRUCOES-DESIGN.md). Redefinidos sob [data-bs-theme="dark"],
   que já é o mecanismo existente (ver theme_toggle.js), não um sistema de
   tema novo.

   Regra de ouro de contraste: a cor de marca #0F9D7A (primary-500) só dá
   3,43:1 com texto branco -- serve pra formas grandes, não pra botão nem
   texto pequeno. Quem precisa de texto sobre cor usa --color-action. */

@font-face {
  font-family: "Inter";
  src: url("/assets/inter-latin-var-1f021a24.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Constantes da marca: não mudam com o tema (usadas no logo e em
     superfícies de destaque com texto branco). */
  --brand-teal: #0F9D7A;
  --brand-coral: #FF6B57;
  --brand-hero-from: #0B7D61;
  --brand-hero-to: #08604A;
  --brand-danger: #B3332B;
  --brand-tint: #E5F6F1;
  --brand-tint-line: #4CC3A2;

  --color-primary-50: #E5F6F1;
  --color-primary-100: #BFE8DC;
  --color-primary-300: #4CC3A2;
  --color-primary-500: #0F9D7A;
  --color-primary-600: #0B7D61;
  --color-primary-700: #08604A;

  --color-ink: #0B2B26;
  --color-muted: #5B6B66;
  --color-paper: #F3F1EA;

  /* Cor de ação: botão primário, link, seleção. Sempre com texto legível
     em cima (5,10:1 no claro; texto escuro 7,07:1 no tema escuro). */
  --color-action: var(--color-primary-600);
  --color-action-hover: var(--color-primary-700);
  --color-on-action: #FFFFFF;

  --color-success: #0B7D61;
  --color-warning: #A6710A;
  --color-danger: #B3332B;

  --color-surface: var(--bs-body-bg);
  --color-border: var(--bs-border-color);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(11, 43, 38, 0.06);
  --shadow-md: 0 4px 16px rgba(11, 43, 38, 0.1);
}

[data-bs-theme="dark"] {
  --color-primary-50: #0E2B25;
  --color-primary-100: #123A32;
  --color-primary-300: #1F8A6E;
  --color-primary-500: #34C79F;
  --color-primary-600: #5EE0B8;
  --color-primary-700: #8BEBCC;

  --color-action: #34C79F;
  --color-action-hover: #5EE0B8;
  --color-on-action: #0B2B26;

  --color-success: #34C79F;
  --color-warning: #D9A441;
  --color-danger: #E2695F;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Bootstrap consome as próprias --bs-* pra cor de componente (links, focus
   ring, utilitários .text-primary/.bg-primary); sobrescrever só essas, não
   recriar os componentes. O -rgb vem calculado à mão por tema (Bootstrap usa
   ele puro em rgba(), não dá pra derivar de var() sem color() ainda). Os
   componentes com cor fixa no Bootstrap (botões, dropdown, progresso) são
   remapeados em brand.css. */
:root {
  --bs-primary: var(--color-action);
  --bs-primary-rgb: 11, 125, 97;
  --bs-link-color: var(--color-action);
  --bs-link-color-rgb: 11, 125, 97;
  --bs-link-hover-color: var(--color-action-hover);
  --bs-link-hover-color-rgb: 8, 96, 74;
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--color-ink);
  --bs-body-color-rgb: 11, 43, 38;
  --bs-success: var(--color-success);
  --bs-success-rgb: 11, 125, 97;
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 166, 113, 10;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 179, 51, 43;
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-focus-ring-color: rgba(11, 125, 97, 0.28);
}

[data-bs-theme="dark"] {
  --bs-primary: var(--color-action);
  --bs-primary-rgb: 52, 199, 159;
  --bs-link-color: var(--color-action);
  --bs-link-color-rgb: 52, 199, 159;
  --bs-link-hover-color: var(--color-action-hover);
  --bs-link-hover-color-rgb: 94, 224, 184;
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: #E6EEEA;
  --bs-body-color-rgb: 230, 238, 234;
  --bs-success: var(--color-success);
  --bs-success-rgb: 52, 199, 159;
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 217, 164, 65;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 226, 105, 95;
  --bs-focus-ring-color: rgba(52, 199, 159, 0.35);
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
}

.icon svg {
  width: 100%;
  height: 100%;
}