/* Tokens da página da família (docs/design-brief.md, Superfície B). SÓ custom properties.
   Nenhuma sombra, nenhum gradiente, fonte do sistema. Tema único (o brief não pede escuro). */
:root {
  /* Cores */
  --color-background: #FBF3E4;
  --color-surface: #FFF9EC;
  --color-surface-calma: #EFE4D2;
  --color-text-primary: #2B2118;
  --color-text-secondary: #6B5A4A;
  --color-border: #D9C7A8;
  --color-ligar: #2E7D32;
  --color-ligar-dark: #1F5C24;
  --color-socorro: #C62828; /* SÓ aviso/estado de socorro */
  --color-aviso: #FFE8A3;
  --color-focus: #2B2118;
  --color-on-ligar: #FFFFFF;
  --color-on-socorro: #FFFFFF;

  /* Cor por pessoa (mesmos hex do app) */
  --pessoa-1: #56B4E9;
  --pessoa-2: #CC79A7;
  --pessoa-3: #F5F5F5;
  --pessoa-4: #7E57C2;

  /* Tipografia (sem fonte baixada; nada abaixo de 18px) */
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-base: 18px;
  --text-base-lh: 1.6;
  --text-lg: 20px;
  --text-lg-lh: 1.5;
  --text-xl: 24px;
  --text-xl-lh: 1.35;
  --text-2xl: 30px;
  --text-2xl-lh: 1.25;
  --text-3xl: 38px;
  --text-3xl-lh: 1.15;
  --weight-normal: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-display: 800;

  /* Espaço, alvo, raio, foco */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --alvo-min: 56px;
  --alvo-principal: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-foto: 4px;
  --radius-full: 9999px;
  --content-max: 480px;
  --moldura-foto: 12px;
  --focus-ring: 3px;
  --focus-offset: 2px;
  --borda-fina: 1px;
  --borda: 2px;
  --filete-estado: 6px;
  --sublinhado-offset: 3px;
  --icone: 28px;
  --icone-grande: 96px;
  --ilustra-min: 240px;
  --foto-max: 46vh;
  --foto-max-pequena: 24vh;
  --tela-cheia: 100vh;
  --tela-cheia-dvh: 100dvh;

  /* Movimento (página: 200 ms) */
  --dur-suave: 200ms;
  --mov-pulso: 1600ms;
  --easing: ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-suave: 0ms;
    --mov-pulso: 0ms;
  }
}

/* Breakpoint desktop (media query não aceita var(), então o literal mora aqui).
   BUG-065: na tela de erro o botão fica logo abaixo da mensagem, não colado no pé da janela. */
@media (min-width: 768px) {
  .s-falha > .u-cresce {
    flex: 0 0 0;
  }
}