/* ============================================================
   NEXT VITAL HEALTH OS — DESIGN TOKENS  v1.0
   Arquitetura em 2 camadas:
   1. Primitivos  — escalas brutas, nunca usados direto em componente
   2. Semânticos  — mapeados por tema via [data-theme]
   Regra de ouro: componente só consome token semântico.
   ============================================================ */

/* ---------- 1. PRIMITIVOS ---------- */
:root{
  /* Marca — família amarelo/verde-limão */
  --brand-amber-300:#FBD98A;
  --brand-amber-400:#F7C34A;   /* primário do tema claro */
  --brand-amber-500:#EFB62E;
  --brand-amber-600:#D99F14;
  --brand-amber-700:#8A5D00;   /* variante "ink" — âmbar como texto direto sobre --surface, AA no claro */
  --brand-lime-300:#DBF56E;
  --brand-lime-400:#C8F03C;    /* primário do tema escuro */
  --brand-lime-500:#B4DC28;

  /* Neutros frios (tema claro) */
  --gray-0:#FFFFFF;
  --gray-25:#F6F7F9;
  --gray-50:#F1F3F6;
  --gray-100:#E4E8EE;
  --gray-300:#94A0AE;
  --gray-500:#5C6674;
  --gray-800:#10151D;

  /* Neutros esverdeados (tema escuro) */
  --moss-950:#0B0E0C;
  --moss-900:#0E120F;
  --moss-850:#121613;
  --moss-800:#171C18;
  --moss-700:#232A25;
  --moss-750:#1B211D;
  --moss-400:#5A645B;
  --moss-300:#8B958C;
  --moss-50:#E9EEE7;

  /* Trilho — invariante entre temas (assinatura da marca) */
  --rail-bg:#0B0B0C;
  --rail-ink:#F5F6F8;
  --rail-muted:#9AA1AB;

  /* Matizes de status */
  --blue-600:#2B4ECC;  --blue-100:#E8EEFC;
  --green-700:#1B7A46; --green-100:#E4F5EA; --green-400:#5FD68B;
  --amber-700:#845B08; --amber-100:#FCF2DC; --amber-400:#F5C542;
  --red-600:#C03A30;   --red-100:#FCE7E5;   --red-400:#FF6B5E;
  --violet-600:#6A4CC8;--violet-100:#EFEAFB;

  /* Tipografia — invariante entre temas */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --text-xs:.68rem; --text-sm:.78rem; --text-base:.88rem;
  --text-lg:1.05rem; --text-xl:1.4rem; --text-2xl:1.8rem;

  /* Geometria — invariante */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px;
  --radius-sm:8px; --radius-md:11px; --radius-lg:14px; --radius-xl:18px;
  --ring:0 0 0 3px;
}

/* ---------- 2. SEMÂNTICOS · TEMA CLARO ---------- */
[data-theme="light"]{
  color-scheme:light;
  --bg:var(--gray-25);
  --surface:var(--gray-0);
  --surface-2:var(--gray-50);
  --line:var(--gray-100);
  --line-soft:var(--gray-50);
  --ink:var(--gray-800);
  --muted:var(--gray-500);
  --faint:var(--gray-300);

  --primary:var(--brand-amber-400);
  --primary-hover:var(--brand-amber-500);
  --primary-ink:var(--brand-amber-700); /* uso como texto/ícone direto sobre --surface — --primary sozinho falha AA no claro (ver R1) */
  --btn-primary:var(--brand-amber-400); /* fundo de botão — já é âmbar no claro, igual a --primary */
  --on-primary:#14100A;
  --primary-soft:rgba(247,195,74,.16);
  --focus-ring:rgba(217,159,20,.45);

  --info-bg:var(--blue-100);    --info-fg:var(--blue-600);
  --success-bg:var(--green-100);--success-fg:var(--green-700);
  --warn-bg:var(--amber-100);   --warn-fg:var(--amber-700);
  --danger-bg:var(--red-100);   --danger-fg:var(--red-600);
  --accent-bg:var(--violet-100);--accent-fg:var(--violet-600);
  --danger-solid:var(--red-600);

  --shadow-card:0 1px 2px rgba(16,21,29,.05),0 4px 14px rgba(16,21,29,.06);
  --shadow-pop:0 12px 34px rgba(16,21,29,.14);
  --skeleton:linear-gradient(90deg,var(--gray-50) 25%,var(--gray-100) 50%,var(--gray-50) 75%);
}

/* ---------- 2. SEMÂNTICOS · TEMA ESCURO ---------- */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:var(--moss-950);
  --surface:var(--moss-850);
  --surface-2:var(--moss-800);
  --line:var(--moss-700);
  --line-soft:var(--moss-750);
  --ink:var(--moss-50);
  --muted:var(--moss-300);
  --faint:var(--moss-400);

  --primary:var(--brand-amber-400); /* âmbar da marca nos dois temas — o limão não faz parte do design */
  --primary-hover:var(--brand-amber-500);
  --primary-ink:var(--brand-amber-400); /* já é legível como texto sobre --surface escuro — mesmo valor de --primary */
  --btn-primary:var(--brand-amber-400);
  --on-primary:var(--moss-950);
  --primary-soft:rgba(247,195,74,.14);
  --focus-ring:rgba(247,195,74,.4);

  --info-bg:rgba(96,140,255,.14);  --info-fg:#8FAEFF;
  --success-bg:rgba(95,214,139,.12);--success-fg:var(--green-400);
  --warn-bg:rgba(245,197,66,.12);  --warn-fg:var(--amber-400);
  --danger-bg:rgba(255,107,94,.12);--danger-fg:var(--red-400);
  --accent-bg:rgba(154,120,255,.14);--accent-fg:#B9A3FF;
  --danger-solid:var(--red-400);

  --shadow-card:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);
  --shadow-pop:0 14px 40px rgba(0,0,0,.55);
  --skeleton:linear-gradient(90deg,var(--moss-800) 25%,var(--moss-700) 50%,var(--moss-800) 75%);
}

/* ============================================================
   REGRAS DE USO (aplicadas por lint de design, não por fé)
   R1  --primary nunca é cor de texto sobre --surface.
       No claro, amber sobre branco dá ~1.6:1. Primário é
       preenchimento; texto por cima usa --on-primary.
   R2  Todo par status usa -bg com -fg correspondente.
       Nunca cruzar (ex.: warn-bg com danger-fg).
   R3  O trilho (--rail-*) não muda com o tema. É a âncora
       visual da marca nos dois modos.
   R4  Ícones-cápsula seguem semântica fixa:
       agenda=warn · pacientes=info · realizadas=accent ·
       canceladas=danger · financeiro/ok=success.
       Cor de cápsula não é decoração aleatória.
   R5  Navegação: um item ativo por vez, rota única por item.
   R6  Foco visível: box-shadow var(--ring) var(--focus-ring)
       em todo elemento interativo. Sem outline:none seco.
   ============================================================ */