/* ============================================================
   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 (from the ACRICA logo) ---- */
  --seed-sol:      #EFBC23; /* golden yellow — hope */
  --seed-crescer:  #1B8875; /* teal — growth */
  --seed-coragem:  #D9503A; /* coral — courage / action */
  --seed-carvao:   #2A2722; /* warm charcoal */

  /* ---- Crescer (teal) scale ---- */
  --teal-50:  #E8F4F0;
  --teal-100: #C8E6DD;
  --teal-200: #97D0C1;
  --teal-300: #5DB6A1;
  --teal-400: #2E9B83;
  --teal-500: #1B8875;
  --teal-600: #137061;
  --teal-700: #0F5A4D;
  --teal-800: #0C463D;
  --teal-900: #08322B;

  /* ---- Coragem (coral) scale ---- */
  --coral-50:  #FBEAE5;
  --coral-100: #F7D2C8;
  --coral-200: #EFA999;
  --coral-300: #E67E66;
  --coral-400: #DD5E40;
  --coral-500: #C9472F;
  --coral-600: #AE3A25;
  --coral-700: #8E2E1D;
  --coral-800: #6E2316;
  --coral-900: #4F1810;

  /* ---- Sol (golden) scale ---- */
  --sol-50:  #FEF8E6;
  --sol-100: #FCEFC0;
  --sol-200: #F8DE85;
  --sol-300: #F2CB4B;
  --sol-400: #EFBC23;
  --sol-500: #D9A40F;
  --sol-600: #B5840A;
  --sol-700: #8A5A00;  /* "sun ink" — usable as text on light */
  --sol-800: #6B4500;
  --sol-900: #4A2F00;

  /* ---- Warm neutral (sand → carvão) scale ---- */
  --sand-0:   #FFFFFF;
  --sand-50:  #FBF8F2;
  --sand-100: #F4EFE5;
  --sand-200: #E9E0D0;
  --sand-300: #D8CCB6;
  --sand-400: #B6A88F;
  --sand-500: #8A7E6A;
  --sand-600: #6B6253;
  --sand-700: #4A443A;
  --sand-800: #322E27;
  --sand-900: #211E19;
  --sand-950: #161310;

  /* ---- 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(--sand-50);
  --bg-tint:     var(--sand-100);
  --surface:     var(--sand-0);
  --surface-2:   var(--sand-100);
  --surface-3:   var(--sand-200);

  --text:        #26231E;
  --text-muted:  #5E564A;
  --text-subtle: #837A6B;
  --text-onbrand:#FFFFFF;

  --border:        #E7DECF;
  --border-strong: #D8CCB6;

  /* Brand roles */
  --brand:        var(--teal-600);
  --brand-hover:  var(--teal-700);
  --brand-soft:   var(--teal-50);
  --brand-ink:    var(--teal-800);

  --accent:       var(--coral-500);
  --accent-hover: var(--coral-600);
  --accent-soft:  var(--coral-50);
  --accent-ink:   var(--coral-700);

  --sun:          var(--sol-400);
  --sun-soft:     var(--sol-50);
  --sun-ink:      var(--sol-700);

  /* Feedback */
  --success: #1F7A4D;  --success-soft: #E4F3EA;
  --warning: #9A6800;  --warning-soft: #FCF1CF;
  --danger:  #B3261E;  --danger-soft:  #FBE7E4;
  --info:    var(--teal-700); --info-soft: var(--teal-50);

  /* Focus */
  --focus-ring: var(--coral-500);

  /* 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(19,112,97,0.22);
  --shadow-accent: 0 10px 28px rgba(201,71,47,0.26);
}

/* ============================================================
   DARK THEME — warm dark, not cold grey
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #6B6253;
  --bg-tint:     #645B4D;
  --surface:     #756B5B;
  --surface-2:   #7F7565;
  --surface-3:   #8A8070;

  --text:        #FFFFFF;
  --text-muted:  #EDE7DB;
  --text-subtle: #EAE4D8;
  --text-onbrand:#2A2620;

  --border:        #988B76;
  --border-strong: #AEA286;

  --brand:        #CCEDE4;
  --brand-hover:  #DEF2EC;
  --brand-soft:   rgba(27,136,117,0.38);
  --brand-ink:    #ECF8F4;

  --accent:       #F6B6A6;
  --accent-hover: #FACBC0;
  --accent-soft:  rgba(201,71,47,0.42);
  --accent-ink:   #FCE5DE;

  --sun:          #F4CD55;
  --sun-soft:     rgba(239,188,35,0.28);
  --sun-ink:      #FCEBB8;

  --success: #A6E6C2;  --success-soft: rgba(31,122,77,0.34);
  --warning: #F4CD55;  --warning-soft: rgba(239,188,35,0.28);
  --danger:  #F8B3AA;  --danger-soft:  rgba(179,38,30,0.36);
  --info:    #BFE7DD; --info-soft: rgba(27,136,117,0.38);

  --focus-ring: #F6B6A6;

  --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; }