/* MilaLab Design System — tokens.
   Fonte: MilaLab_Design_System.html (raiz do repo).
   Cores de marca/prioridade/status são idênticas nos dois temas (claro/escuro);
   apenas os neutros (--gray-*) invertem. O preto neutro do tema escuro do app
   é intencional (pedido explícito da usuária) e não o azul-petróleo do mock. */
:root{
  /* marca */
  /* Escala da marca — rebrand azul: 900/800 = azul-marinho de identidade,
     600 = azul de acao, 500 = ciano de destaque (usado no tema escuro). */
  --indigo-900:#02043D; --indigo-800:#050866; --indigo-700:#0A2A9E; --indigo-600:#004AE8;
  --indigo-500:#0183FF; --indigo-100:#E3EBFF;
  --violet-500:#8B6FE8; --teal-400:#3FBFB4;

  /* neutros do documento (utilitários — o app usa --bg/--surface/--text
     próprios para preservar o preto puro do tema escuro; estes ficam
     disponíveis para badges/tags/textos que quiserem a escala exata) */
  --white:#FFFFFF;
  --gray-25:#FAFAFC; --gray-50:#F5F6F9; --gray-100:#EDEEF3; --gray-200:#E2E4EC;
  --gray-300:#CBCEDB; --gray-400:#A7ABBD; --gray-500:#7D8199; --gray-600:#5B5F73;
  --gray-700:#3F4256; --gray-800:#282A3A; --gray-900:#15161F;

  /* prata (uso estratégico, ver seção 6 do Design System) */
  --silver-grad:linear-gradient(135deg,#EDEFF3 0%,#C9CDD8 28%,#F5F6F8 50%,#B9BEC9 72%,#E7E9ED 100%);
  --silver-line:linear-gradient(90deg, transparent, #C9CDD8, #F5F6F8, #C9CDD8, transparent);
  --silver-ink:#5B5F6B;

  /* status / prioridade — constantes nos dois temas */
  --red-600:#D6433C; --red-100:#FCEAE8;
  --amber-600:#B8790A; --amber-100:#FDF0DA;
  --green-600:#1F8A4C; --green-100:#E6F5EB;
  --blue-600:#2E5FD9;  --blue-100:#E9EEFC;

  --alert-info-text:#1E3E8F;    --alert-info-border:#CBD8F7;
  --alert-success-text:#175E36; --alert-success-border:#C5E8D1;
  --alert-warning-text:#7A4F06; --alert-warning-border:#F3DDAF;
  --alert-error-text:#8F2822;   --alert-error-border:#F4C7C3;
  --alert-confirm-text:#050866; --alert-confirm-border:#C3D3FA;

  /* elevação */
  --shadow-1:0 1px 2px rgba(21,22,31,.05);
  --shadow-2:0 2px 6px rgba(21,22,31,.06), 0 1px 2px rgba(21,22,31,.04);
  --shadow-3:0 8px 24px rgba(21,22,31,.08), 0 2px 6px rgba(21,22,31,.04);
  --shadow-4:0 16px 40px rgba(21,22,31,.12);

  /* raio */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-full:999px;

  /* espaçamento (base 4px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* tipografia — escala fixa, 10 papéis */
  --fs-caption:11px; --fs-small:12px; --fs-body:13px; --fs-body-lg:14px;
  --fs-h4:16px; --fs-h3:18px; --fs-h2:22px; --fs-h1:26px; --fs-display:32px; --fs-hero:40px;

  /* movimento — microinterações. A duração cresce com o "peso" do elemento
     que se move (um botão reage mais rápido que uma gaveta lateral). Ver
     styles/main.css para onde cada token é usado — a ideia é o sistema
     inteiro compartilhar a MESMA sensação de resposta, em vez de cada tela
     ter sua própria duração/curva. */
  --dur-fast:120ms;   /* hover, press, chip, checkbox */
  --dur-base:180ms;   /* padrão: cor, borda, fade de conteúdo */
  --dur-slow:240ms;   /* modais, gavetas, elementos maiores */
  --ease-standard:cubic-bezier(.4,0,.2,1); /* já era a curva mais usada no app — vira o padrão */
  --ease-out:cubic-bezier(0,0,.2,1);       /* entrada */
  --ease-in:cubic-bezier(.4,0,1,1);        /* saída */
}

/* Respeita a preferência do sistema por menos movimento — reduz TODAS as
   transições/animações a praticamente zero sem esconder nem quebrar nada
   (o estado final continua sendo aplicado, só sem a transição visual). */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

body.light{
  --alert-info-text:#1E3E8F;    --alert-info-border:#CBD8F7;
  --alert-success-text:#175E36; --alert-success-border:#C5E8D1;
  --alert-warning-text:#7A4F06; --alert-warning-border:#F3DDAF;
  --alert-error-text:#8F2822;   --alert-error-border:#F4C7C3;
  --alert-confirm-text:#050866; --alert-confirm-border:#C3D3FA;
}

/* Tema escuro: mesmos textos de aviso ficam claros o bastante p/ contraste em fundo preto */
:root{
  --alert-info-text-dark:#AFC6FB; --alert-info-border-dark:rgba(46,95,217,.35);
  --alert-success-text-dark:#8FE3B4; --alert-success-border-dark:rgba(31,138,76,.35);
  --alert-warning-text-dark:#F3C978; --alert-warning-border-dark:rgba(184,121,10,.4);
  --alert-error-text-dark:#F5A39D; --alert-error-border-dark:rgba(214,67,60,.4);
  --alert-confirm-text-dark:#AFD3FF; --alert-confirm-border-dark:rgba(1,131,255,.4);
}
body:not(.light){
  --alert-info-text:var(--alert-info-text-dark);       --alert-info-border:var(--alert-info-border-dark);
  --alert-success-text:var(--alert-success-text-dark);  --alert-success-border:var(--alert-success-border-dark);
  --alert-warning-text:var(--alert-warning-text-dark);  --alert-warning-border:var(--alert-warning-border-dark);
  --alert-error-text:var(--alert-error-text-dark);      --alert-error-border:var(--alert-error-border-dark);
  --alert-confirm-text:var(--alert-confirm-text-dark);  --alert-confirm-border:var(--alert-confirm-border-dark);
}