/* tokens.css — Sofia Barbosa · quiz de qualificação
   Paleta: Fase 4 [identificado no manual] · derivados e escala: [recomendação complementar]
   Fonte: ui-guide/guia-ui-webdesign-sofia-barbosa.md — seção 15 */
:root {
  /* Cores — base oficial */
  --color-bg:            #F3EDE2;  /* creme "papel" */
  --color-ink:           #1A1A1A;  /* grafite "tinta" */
  --color-accent:        #B3552F;  /* terracota — único acento */

  /* Cores — derivadas */
  --color-ink-hover:     #33302C;
  --color-ink-soft:      rgba(26,26,26,0.68);
  --color-ink-muted:     rgba(26,26,26,0.55);
  --color-ink-faint:     rgba(26,26,26,0.40);
  --color-border:        rgba(26,26,26,0.18);
  --color-border-strong: rgba(26,26,26,0.40);
  --color-divider:       rgba(26,26,26,0.12);
  --color-surface-field: #FAF6EE;
  --color-accent-tint:   rgba(179,85,47,0.07);
  --color-accent-focus:  rgba(179,85,47,0.25);
  --color-error:         #8A2E1E;
  --color-disabled-bg:   rgba(26,26,26,0.10);
  --color-disabled-text: rgba(26,26,26,0.38);

  /* Tipografia — pendente de confirmação da cliente (Lora × Playfair Display) */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --text-h1:       clamp(27px, 6vw, 32px);   /* abertura/encerramento */
  --text-question: clamp(23px, 5.5vw, 26px); /* perguntas */
  --text-note:     15px;                     /* nota itálica */
  --text-body:     clamp(15px, 4vw, 16px);
  --text-option:   15px;
  --text-button:   15px;
  --text-label:    14px;
  --text-micro:    13px;
  --text-caption:  12px;                     /* credencial do rodapé */

  --leading-title: 1.3;
  --leading-body:  1.6;
  --tracking-caps: 0.08em;

  /* Espaçamento (base 8px) */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* Layout */
  --content-max:   480px;
  --text-max:      320px;   /* parágrafos das telas centradas */
  --page-pad:      24px;    /* 32px em >= 768px */
  --touch-min:     44px;
  --control-h:     48px;

  /* Raio */
  --radius-sm:   8px;    /* botões, campos */
  --radius-md:   10px;   /* opções de resposta */
  --radius-full: 999px;  /* avatar, marcador, pontos de progresso */

  /* Movimento */
  --transition-screen: 320ms ease;
  --transition-ui:     200ms ease;
  --autoadvance-delay: 380ms;
}

@media (min-width: 768px) {
  :root {
    --page-pad: 32px;
  }
}