/*
 * Tokens do guia de interface. Todo componente usa estas variáveis; nada de
 * valores soltos nem estilo inline.
 *
 * Tamanhos de tela (os mesmos em todo o app e nos testes de sistema).
 * Variáveis CSS não funcionam dentro de @media, então os valores são estes:
 *   celular   até 639px      (padrão, escrito primeiro)
 *   tablet    @media (min-width: 640px)
 *   notebook  @media (min-width: 1024px)
 */
:root {
  /*
   * Cores (mesma família do odonto_app: turquesa + verde + azul-ardósia).
   * Texto sobre fundo sempre >= 4.5:1, a maioria >= 7:1, legível ao sol.
   * O turquesa é só destaque (marcas, degradês, foco), nunca cor de texto.
   */
  --color-page: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f5f9;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-border: #94a3b8;
  --color-border-soft: #e2e8f0;
  --color-primary: #15803d;
  --color-primary-strong: #166534;
  --color-primary-soft: #dcfce7;
  --color-on-primary: #ffffff;
  --color-accent: #2dd4bf;
  --color-accent-strong: #14b8a6;
  --color-accent-soft: #ccfbf1;
  --color-accent-text: #0f766e;     /* turquesa escuro: único tom de turquesa permitido em texto/ícone */
  --gradient-brand: linear-gradient(135deg, #14b8a6 0%, #16a34a 100%);
  --gradient-brand-dark: linear-gradient(160deg, #0f172a 0%, #134e4a 55%, #14532d 100%);
  --color-sidebar: #0f172a;
  --color-sidebar-text: #e2e8f0;
  --color-sidebar-active: rgba(45, 212, 191, 0.14);
  --color-danger: #b91c1c;
  --color-danger-soft: #fef2f2;
  --color-success: #15803d;
  --color-success-soft: #f0fdf4;
  --color-warning: #92400e;
  --color-warning-soft: #fef3c7;
  --color-info: #1d4ed8;
  --color-info-soft: #eff6ff;
  --color-focus: #0f766e;
  --color-sidebar-line: rgba(255, 255, 255, 0.1);
  --color-sidebar-hover: rgba(255, 255, 255, 0.06);

  /* Cores dos talhões no mapa (mesma ordem de Field::COLORS) */
  --field-color-0: #2dd4bf;
  --field-color-1: #facc15;
  --field-color-2: #fb923c;
  --field-color-3: #f472b6;
  --field-color-4: #a78bfa;
  --field-color-5: #60a5fa;
  --field-color-6: #4ade80;
  --field-color-7: #f87171;

  /* Mapa de geadas (mesma ordem de FrostHelper::FROST_COLORS): do claro ao escuro */
  --frost-level-0: #e2e8f0;
  --frost-level-1: #93c5fd;
  --frost-level-2: #3b82f6;
  --frost-level-3: #1e3a8a;

  /* Mapa */
  --map-height-phone: calc(100dvh - var(--topbar-height) - var(--bottom-nav-height) - 9rem);
  --map-height-detail: 16rem;
  --map-vertex-size: 1.375rem;
  --map-midpoint-size: 0.875rem;

  /* Avatares: texto branco com contraste >= 4.5:1 */
  --avatar-0: linear-gradient(135deg, #0f766e 0%, #15803d 100%);
  --avatar-1: #1d4ed8;
  --avatar-2: #0f766e;
  --avatar-3: #6d28d9;
  --avatar-4: #b45309;
  --avatar-5: #334155;

  /* Tipografia: mínimo 16px no texto e 18px nos campos */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-small: 1rem;      /* 16px: nunca menor que isso */
  --font-size-base: 1rem;
  --font-size-input: 1.125rem;  /* 18px */
  --font-size-large: 1.25rem;
  --font-size-title: 1.625rem;
  --font-size-display: 2rem;
  --line-height: 1.5;
  --font-weight-medium: 500;
  --font-weight-bold: 650;

  /* Alvos de toque: área tocável de pelo menos 48px, mesmo quando o desenho é menor */
  --touch-target: 3rem;
  --control-height: 2.5rem;     /* altura visível de botões */
  --input-height: 3rem;

  /* Espaçamentos */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-small: 0.5rem;
  --radius: 0.625rem;
  --radius-large: 1rem;
  --border-width: 1px;
  --focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.45);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-raised: 0 10px 24px rgba(15, 23, 42, 0.08);
  --shadow-button: 0 1px 2px rgba(15, 23, 42, 0.12);
  --shadow-bottom-nav: 0 -2px 12px rgba(15, 23, 42, 0.06);

  /* Estrutura */
  --content-max-width: 60rem;
  --form-max-width: 34rem;
  --sidebar-width: 16rem;
  --topbar-height: 3.5rem;
  --bottom-nav-height: 4.25rem;
}