/* ============================================================
   PSICOLOGIA PRETA — Design System canônico
   Terracota (raiz, cerâmica africana, Brasil) + Ouro (acento)
   Syne (display, editorial e forte) + Inter (corpo) + Instrument Serif (italic pontual)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

/* Garante que o atributo HTML [hidden] sempre ganha — caso contrário,
   regras de .empty-page{display:flex}, .badge{display:inline-flex}, etc.
   sobrescrevem o esconder padrão e vazam o componente. */
[hidden]{display:none!important;}

:root{
  /* TERRACOTA — raiz da marca */
  --terra-deep:#3D0E00;
  --terra-dark:#6B2210;
  --terra-mid:#A03A1C;
  --terra:#C4562B;
  --terra-light:#D9703F;
  --terra-pale:rgba(196,86,43,0.08);
  --terra-border:rgba(196,86,43,0.22);

  /* OURO — acento ancestral */
  --gold:#D4A832;
  --gold-light:#EDD068;
  --gold-pale:rgba(212,168,50,0.12);
  --gold-border:rgba(212,168,50,0.3);
  --gold-border-strong:rgba(212,168,50,0.5);

  /* CREME — base respirada */
  --cream:#FFF8F2;
  --cream-2:#F5EDE3;
  --cream-3:#EBD9C9;
  --cream-4:#D9C0A8;

  /* TEXTO */
  --ink-1:#1E0A00;
  --ink-2:#5C3520;
  --ink-3:#8C5A3A;

  /* TEXTO sobre terracota */
  --on-terra-1:#FFF8F2;
  --on-terra-2:rgba(255,248,242,0.78);
  --on-terra-3:rgba(255,248,242,0.45);

  /* Aliases pra páginas legadas */
  --text-c1:var(--ink-1); --text-c2:var(--ink-2); --text-c3:var(--ink-3);
  --text-1:var(--ink-1); --text-2:var(--ink-2); --text-3:var(--ink-3);
  --bg-0:var(--terra-deep); --bg-1:#4F1608; --bg-2:var(--terra-dark); --bg-3:var(--terra-mid);
  --bg-card:rgba(255,248,242,0.04); --bg-card-hover:rgba(255,248,242,0.07);
  --on-ink-1:var(--on-terra-1); --on-ink-2:var(--on-terra-2); --on-ink-3:var(--on-terra-3);
  --clay-0:var(--cream); --clay-1:var(--cream-2); --clay-2:var(--cream-3); --clay-3:var(--cream-4);
  --ochre:var(--gold); --ochre-dark:#A07A20; --ochre-deep:#6B5114; --ochre-pale:var(--gold-pale); --ochre-border:var(--gold-border);
  --ink:var(--terra-deep); --terra-dark-alias:var(--terra-dark);
  --purple:var(--terra); --purple-light:var(--terra-light); --purple-glow:rgba(196,86,43,0.25);
  --vibranium:var(--gold); --vibranium-light:var(--gold-light); --vibranium-glow:var(--gold-pale);

  /* Tipografia */
  --font-display:'Syne',system-ui,sans-serif;
  --font-italic:'Instrument Serif',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-d:var(--font-display); --font-s:var(--font-italic); --font-b:var(--font-body);

  /* Sistema */
  --nav-h:72px;
  --ease:0.3s cubic-bezier(.2,.6,.2,1);
  --radius:3px;
  --radius-md:6px;
  --radius-lg:12px;

  --shadow:0 4px 16px rgba(61,14,0,0.08);
  --shadow-md:0 12px 36px rgba(61,14,0,0.14);
  --shadow-lg:0 24px 80px rgba(61,14,0,0.22);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--cream);color:var(--ink-1);font-family:var(--font-body);font-weight:400;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
img{max-width:100%;display:block;}
::selection{background:var(--terra);color:var(--cream);}