/* Conjoin · Design tokens
   Fonte: DESIGN.md (derivado do manual de identidade e do design system aprovado).
   Regra da Tinta: ouro, água e costa como texto pequeno usam as variantes -tinta. */

:root {
  /* Marca */
  --ouro: #C6932E;
  --ouro-escuro: #B4832A;
  --ouro-tinta: #7F5B12;
  --ouro-veu: #FAF1DF;
  --ouro-marca: #D09A36;
  --azul: #033159;
  --azul-veu: #E6EDF4;
  --agua: #00A6A9;
  --agua-tinta: #007376;
  --agua-veu: #E0F4F4;

  /* Neutros (família litorânea) */
  --alva: #FFFFFF;
  --bruma: #F4F6F7;
  --nevoa: #E3E8EB;
  --mare: #ADB8C1;
  --mare-funda: #7F8E9B;
  --costa: #657786;
  --costa-tinta: #56687A;
  --porto: #243746;
  --noite: #101C26;

  /* Estados: cheia · tinta · véu */
  --sucesso: #16A34A;
  --sucesso-tinta: #157A3B;
  --sucesso-veu: #E7F6EC;
  --info: #2563EB;
  --info-tinta: #1D4ED8;
  --info-veu: #E8EFFD;
  --atencao: #F59E0B;
  --atencao-tinta: #B45309;
  --atencao-veu: #FEF3E2;
  --erro: #EF4444;
  --erro-tinta: #B91C1C;
  --erro-veu: #FDECEC;
  --destaque: #8B5CF6;
  --destaque-tinta: #6D28D9;
  --destaque-veu: #F1ECFE;

  /* Papéis semânticos */
  --bg: #F8F9FA;
  --surface: var(--alva);
  --surface-sunken: var(--bruma);
  --ink: var(--noite);
  --ink-strong: var(--azul);
  --ink-soft: var(--costa-tinta);
  --line: #E9EDF0;
  --line-strong: var(--mare);
  --field-line: var(--mare-funda);
  --action: var(--ouro);
  --action-hover: var(--ouro-escuro);
  --on-action: var(--noite);
  --focus: var(--azul);

  /* Tipografia */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: 3rem;      /* 48 */
  --lh-display: 3.5rem;
  --fs-headline: 2rem;     /* 32 */
  --lh-headline: 2.5rem;
  --fs-title-lg: 1.5rem;   /* 24 */
  --lh-title-lg: 2rem;
  --fs-title: 1.25rem;     /* 20 */
  --lh-title: 1.75rem;
  --fs-body: 1rem;         /* 16 */
  --lh-body: 1.5rem;
  --fs-label: 0.875rem;    /* 14, menor tamanho permitido */
  --lh-label: 1.25rem;

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

  /* Raios */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Elevação */
  --shadow-whisper: 0 1px 2px rgba(16, 28, 38, 0.04), 0 8px 24px rgba(16, 28, 38, 0.06);
  --shadow-float: 0 -2px 8px rgba(16, 28, 38, 0.04), 0 8px 32px rgba(16, 28, 38, 0.10);
  --ring: 0 0 0 2px var(--alva), 0 0 0 4px var(--focus);

  /* Movimento */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-match: 600ms;

  /* Camadas */
  --z-sticky: 10;
  --z-tabbar: 20;
  --z-demo-trigger: 30;
  --z-sheet-backdrop: 40;
  --z-sheet: 50;
  --z-toast: 60;

  /* Dimensões do app */
  --app-max: 430px;
  --tabbar-h: 72px;
  --touch: 48px;
  --touch-min: 44px;
}

/* Alto contraste (opção do app, Conta > Acessibilidade) */
:root.hc {
  --ink-soft: var(--porto);
  --line: var(--mare-funda);
  --line-strong: var(--costa);
  --field-line: var(--porto);
  --bg: var(--alva);
  --surface-sunken: var(--alva);
  --shadow-whisper: none;
}

/* Tamanho do texto (opção do app): escala o rem */
:root[data-text="lg"] { font-size: 112.5%; }
:root[data-text="xl"] { font-size: 125%; }