@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,900;1,900&family=Yeseva+One&family=Barlow+Condensed:wght@600;800&family=Inter+Tight:wght@400;600;800&family=JetBrains+Mono&display=swap');

:root{
  --background:#F5EFE0; --foreground:#1E2A1F; --primary:#4A8B3F; --primary-foreground:#fff;
  --accent:#C0432A; --muted:#ECE4D0; --muted-foreground:rgba(30,42,31,.65);
  --card:#FBF6E9; --border:rgba(30,42,31,.14); --mustard:#E8A53C; --cream:#FBF6E9; --charcoal:#1E2A1F;
  --font-display:"Merriweather",ui-serif,Georgia,serif;
  --font-script:"Yeseva One",ui-serif,Georgia,serif;
  --font-sans:"Barlow Condensed","Inter Tight",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Inter Tight",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

body, .breakdance{ background:var(--background); color:var(--foreground); font-family:var(--font-body); }

/* scroll-reveal */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].is-visible{opacity:1;transform:none}

/* === Overrides das armadilhas Breakdance === */
/* headings: a base do Breakdance (0,1,1) impõe cor/tamanho — herdar cor */
.breakdance [class*="sdf-"] h1,.breakdance [class*="sdf-"] h2,.breakdance [class*="sdf-"] h3{ color:inherit; }
/* sem links azuis: re-apontar a var + apanhar rich text */
.breakdance [class*="sdf-"]{ --bde-links-color:var(--foreground); --bde-links-color-hover:var(--primary); }
/* imagens */
.breakdance [class*="sdf-"] img{ max-width:100%; height:auto; display:block; }
/* builder reveal: a classe sdf-builder é posta por sdf-global.js */
.sdf-builder [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }

/* === FONTES: re-apontar as vars do Breakdance e forçar nas nossas secções (lição §7a) === */
:root, body.breakdance, .breakdance [class*="sdf-"]{
  --bde-text-font-family: var(--font-body);
  --bde-heading-font-family: var(--font-display);
}
body.breakdance{ font-family: var(--font-body) !important; background: var(--background) !important; color: var(--foreground) !important; }
.breakdance [class*="sdf-"], .breakdance [class*="sdf-"] p, .breakdance [class*="sdf-"] li, .breakdance [class*="sdf-"] a, .breakdance [class*="sdf-"] span{ font-family: var(--font-body); }
.breakdance [class*="sdf-"] h1, .breakdance [class*="sdf-"] h2, .breakdance [class*="sdf-"] h3, .breakdance [class*="sdf-"] h4, .breakdance [class*="sdf-"] h5, .breakdance [class*="sdf-"] h6{ font-family: var(--font-display) !important; }
