/* ============================================================
   ACRICA · Design System — Design Tokens
   Warm, hopeful, human. Grounded in the brand logo palette.
   Light + Dark. WCAG 2.1 AA verified for text/UI pairings.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Figtree:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---- Raw brand seeds — paleta oficial ACRICA (Manual da Marca) ---- */
  --seed-azul:   #3691CE; /* confiança, ação */
  --seed-rosa:   #E883AB; /* acolhimento, doação */
  --seed-verde:  #6EBA60; /* crescer */
  --seed-amarelo:#F2CB42; /* esperança, infância */
  --seed-roxo:   #7B7CB7; /* criatividade */
  --seed-taupe:  #AF9E97; /* neutro quente */

  /* ---- Azul (confiança / marca primária) ---- */
  --blue-50:  #EBF4FA;
  --blue-100: #D2E6F4;
  --blue-200: #A5CEE9;
  --blue-300: #73B3DD;
  --blue-400: #4A9DD3;
  --blue-500: #3691CE; /* oficial */
  --blue-600: #2B7BB1;
  --blue-700: #236490;
  --blue-800: #1B4D6F;
  --blue-900: #13364E;

  /* ---- Rosa (acolhimento / acento) ---- */
  --pink-50:  #FCEEF3;
  --pink-100: #FAE1EB;
  --pink-200: #F5C7D9;
  --pink-300: #EFA9C5;
  --pink-400: #E883AB; /* oficial */
  --pink-500: #E15B91;
  --pink-600: #D93074;
  --pink-700: #B5215C;
  --pink-800: #8A1946;
  --pink-900: #5F1130;

  /* ---- Amarelo (esperança / destaque) ---- */
  --yellow-50:  #FEFAEC;
  --yellow-100: #FCF3D4;
  --yellow-200: #F9E8A9;
  --yellow-300: #F5DA75;
  --yellow-400: #F2CB42; /* oficial */
  --yellow-500: #EFC015;
  --yellow-600: #C8A00E;
  --yellow-700: #9D7E0B;
  --yellow-800: #775F08; /* "sun ink" — usável como texto sobre claro */
  --yellow-900: #514106;

  /* ---- Verde (crescer — uso secundário/sucesso) ---- */
  --green:      #6EBA60; /* oficial */
  --green-soft: #E8F4E6;
  --green-ink:  #386A2F;

  /* ---- Roxo (criatividade — uso terciário/decorativo) ---- */
  --purple:      #7B7CB7; /* oficial */
  --purple-soft: #E8E8F2;
  --purple-ink:  #37376A;

  /* ---- Taupe (neutro quente — fundo & texto) ---- */
  --taupe-0:   #FFFFFF;
  --taupe-50:  #F8F7F6;
  --taupe-100: #F0ECEB;
  --taupe-200: #E0D9D7;
  --taupe-300: #CABFBA;
  --taupe-400: #AF9E97; /* oficial */
  --taupe-500: #99847B;
  --taupe-600: #7F6A62;
  --taupe-700: #62524B;
  --taupe-800: #483C37;
  --taupe-900: #312926;
  --taupe-950: #201B18;

  /* ---- Typography ---- */
  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display:   clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem); /* 44 → 76 */
  --fs-h1:        clamp(2.1rem, 1.4rem + 2.8vw, 3.25rem);  /* 34 → 52 */
  --fs-h2:        clamp(1.6rem, 1.2rem + 1.8vw, 2.35rem);  /* 26 → 38 */
  --fs-h3:        clamp(1.3rem, 1.1rem + 1vw, 1.7rem);     /* 21 → 27 */
  --fs-h4:        1.25rem;
  --fs-lead:      clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-body:      1.0625rem; /* 17px — generous for readability */
  --fs-sm:        0.9375rem;
  --fs-xs:        0.8125rem;

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.6;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.12em;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* ---- Radii ---- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-prose: 68ch;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   LIGHT THEME (default)
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:          var(--taupe-50);
  --bg-tint:     var(--taupe-100);
  --surface:     var(--taupe-0);
  --surface-2:   var(--taupe-100);
  --surface-3:   var(--taupe-200);

  --text:        var(--taupe-950);
  --text-muted:  var(--taupe-700);
  --text-subtle: var(--taupe-600);
  --text-onbrand:#FFFFFF;

  --border:        var(--taupe-200);
  --border-strong: var(--taupe-300);

  /* Brand roles — 600/500 falharam AA com texto branco (contraste <4.5:1
     nos tons oficiais mais claros); usar 700+ garante ≥6:1 para texto/botão */
  --brand:        var(--blue-700);
  --brand-hover:  var(--blue-800);
  --brand-soft:   var(--blue-50);
  --brand-ink:    var(--blue-900);

  --accent:       var(--pink-700);
  --accent-hover: var(--pink-800);
  --accent-soft:  var(--pink-50);
  --accent-ink:   var(--pink-900);

  --sun:          var(--yellow-400);
  --sun-soft:     var(--yellow-50);
  --sun-ink:      var(--yellow-800);

  /* Feedback */
  --success: var(--green-ink); --success-soft: var(--green-soft);
  --warning: var(--yellow-800); --warning-soft: var(--yellow-100);
  --danger:  #B3261E;  --danger-soft:  #FBE7E4;
  --info:    var(--blue-700); --info-soft: var(--blue-50);

  /* Focus */
  --focus-ring: var(--pink-600);

  /* Shadows (warm tint) */
  --shadow-sm: 0 1px 2px rgba(42,39,34,0.06), 0 1px 3px rgba(42,39,34,0.08);
  --shadow-md: 0 4px 10px rgba(42,39,34,0.07), 0 10px 24px rgba(42,39,34,0.08);
  --shadow-lg: 0 12px 28px rgba(42,39,34,0.10), 0 24px 56px rgba(42,39,34,0.12);
  --shadow-brand: 0 10px 28px rgba(43,123,177,0.22);
  --shadow-accent: 0 10px 28px rgba(225,91,145,0.26);
}

/* ============================================================
   DARK THEME — warm dark, not cold grey
   ============================================================ */
/* Corrigido em 04/09/2026. O escuro anterior usava taupe-700/600/500 como fundo e
   superfície — tons médios, não escuros. Resultado medido com axe-core: 285 nós
   reprovando 1.4.3 nas 7 páginas (ex.: lang-switch a 3,01:1; cartões a 3,9:1).
   A rampa desceu para 950/900/800/700: o fundo virou fundo de verdade e o texto
   voltou a ter para onde contrastar. Ver auditoria no ESTADO-ATUAL. */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          var(--taupe-950);
  --bg-tint:     var(--taupe-900);
  --surface:     var(--taupe-900);
  --surface-2:   var(--taupe-800);
  --surface-3:   var(--taupe-700);

  --text:        #FFFFFF;
  --text-muted:  var(--taupe-200);
  --text-subtle: var(--taupe-300);
  --text-onbrand:var(--taupe-950);

  --border:        var(--taupe-700);
  --border-strong: var(--taupe-600);

  --brand:        var(--blue-100);
  --brand-hover:  var(--blue-50);
  --brand-soft:   rgba(43,123,177,0.38);
  --brand-ink:    var(--blue-50);

  --accent:       var(--pink-200);
  --accent-hover: var(--pink-100);
  --accent-soft:  rgba(225,91,145,0.42);
  --accent-ink:   var(--pink-50);

  --sun:          var(--yellow-300);
  --sun-soft:     rgba(242,203,66,0.28);
  --sun-ink:      var(--yellow-100);

  --success: #C5E3BF;  --success-soft: rgba(56,106,47,0.34);
  --warning: var(--yellow-300);  --warning-soft: rgba(242,203,66,0.28);
  --danger:  #F8B3AA;  --danger-soft:  rgba(179,38,30,0.36);
  --info:    var(--blue-200); --info-soft: rgba(43,123,177,0.38);

  --focus-ring: var(--pink-200);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 12px 28px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 36px rgba(0,0,0,0.55), 0 28px 64px rgba(0,0,0,0.6);
  --shadow-brand: 0 10px 28px rgba(0,0,0,0.5);
  --shadow-accent: 0 10px 28px rgba(0,0,0,0.5);
}

/* ============================================================
   BASE RESET + PRIMITIVES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

h1,h2,h3,h4,h5 { font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 700; text-wrap: balance; color: var(--text); }
p { text-wrap: pretty; }

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }

img, svg { display: block; max-width: 100%; }

/* Accessible focus — always visible, never removed */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--sun-soft); color: var(--text); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(-150%);
  top: 12px; z-index: 999; background: var(--accent); color: #fff;
  padding: 12px 20px; border-radius: var(--r-pill); font-weight: 600;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateX(-50%) translateY(0); color:#fff; }