/* AtendeIA — estilos globais e tokens do design system.
   Fonte única de cores, fontes, tamanhos, espaçamentos e estados.
   Todos os componentes (Atende*.dc.html) e páginas leem estas variáveis. */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  /* Superfícies e texto */
  --color-bg: #07110f;
  --color-surface: #0d1c19;
  --color-surface-2: #112420;
  --color-text: #eef3f1;
  --color-divider: color-mix(in srgb, #eef3f1 22%, transparent);
  --color-divider-sutil: color-mix(in srgb, #eef3f1 10%, transparent);

  --color-neutral-100: #12241f;
  --color-neutral-200: #172b26;
  --color-neutral-300: #1f352f;
  --color-neutral-400: #2f4a43;
  --color-neutral-500: #5f7a73;
  --color-neutral-600: #7f9791;
  --color-neutral-700: #a3b6b0;
  --color-neutral-800: #cbd7d3;
  --color-neutral-900: #e6edeb;

  /* Destaque — verde esmeralda */
  --color-accent: #1fa672;
  --color-accent-100: #0e2a20;
  --color-accent-200: #12362a;
  --color-accent-300: #1a4a38;
  --color-accent-400: #25c285;
  --color-accent-500: #1fa672;
  --color-accent-600: #26b87f;
  --color-accent-700: #34c98f;
  --color-accent-800: #82e2bb;
  --color-accent-900: #c4f3de;

  /* Estados (badges, avisos, agenda) */
  --color-sucesso: #1fa672;
  --color-sucesso-fundo: #0e2a20;
  --color-sucesso-texto: #6fdcaf;
  --color-alerta: #d4a13a;
  --color-alerta-fundo: #2a2211;
  --color-alerta-texto: #f0c874;
  --color-info: #4a9fc4;
  --color-info-fundo: #0f2330;
  --color-info-texto: #93cbe4;
  --color-perigo: #ef6b5b;
  --color-perigo-fundo: #2a1412;
  --color-perigo-texto: #f59486;
  --color-perigo-titulo: #ffc2b9;

  /* Sobreposições (fundo de modal e painel lateral) */
  --color-sobreposicao: color-mix(in srgb, #000 68%, transparent);
  --color-sobreposicao-painel: color-mix(in srgb, #000 60%, transparent);

  /* Tipografia */
  --font-heading: "Ubuntu", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Montserrat", system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 22px;
  --fs-xl: 30px;
  --fs-2xl: clamp(30px, 4.5vw, 44px);
  --tracking-kicker: 0.14em;

  /* Espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Forma e medidas */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --altura-controle: 48px;
  --altura-controle-sm: 36px;
  --largura-menu: 248px;
  --largura-conteudo: 1200px;

  /* Breakpoints (referência; variáveis CSS não funcionam dentro de @media).
     O layout é fluido com flex-wrap/grid; estes são os pontos de quebra usados nos componentes:
     --bp-celular   360px  → AtendeMenu vira barra superior quando sua largura passa disso
     --bp-etapas    680px  → AtendeEtapas muda para a versão compacta abaixo disso
     --bp-painel    880px  → menu lateral + conteúdo (248px + 620px) deixam de caber lado a lado
     --bp-conteudo 1200px  → largura máxima do conteúdo das telas do paciente */
  --bp-celular: 360px;
  --bp-etapas: 680px;
  --bp-painel: 880px;
  --bp-conteudo: 1200px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 3px 10px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; color-scheme: dark; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.12; margin: 0 0 var(--space-2); }
h1, h2 { color: var(--color-accent-700); font-weight: 500; letter-spacing: -0.01em; }
h3, h4, h5, h6 { font-weight: 500; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }
img { display: block; max-width: 100%; }
::placeholder { color: var(--color-neutral-600); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 35%, transparent); }
select option { background: var(--color-surface); color: var(--color-text); }