/* ============================================================
   ANGELA CONTEMPLA — base.css
   Tokens, reset, tipografia, acessibilidade base
   ============================================================ */

@font-face{font-family:'Playfair Display';src:url('../fonts/PlayfairDisplay-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Playfair Display';src:url('../fonts/PlayfairDisplay-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('../fonts/Manrope-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('../fonts/Manrope-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('../fonts/Manrope-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('../fonts/Manrope-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('../fonts/Manrope-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}

:root{
  /* cores */
  --black:#070707;
  --graphite:#111111;
  --charcoal:#1A1A1A;
  --charcoal-2:#232323;
  --text-light:#D0D0D0;
  --text-muted:#8E8B84;
  --cream:#F4F1EA;
  --gold:#D4AF37;
  --gold-light:#F1CF72;
  --gold-deep:#8C681E;
  --success:#4ADE80;
  --error:#E5675C;

  /* tipografia */
  --font-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-sans:'Manrope',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --text-xs:.75rem;
  --text-sm:.875rem;
  --text-base:1rem;
  --text-md:1.125rem;
  --text-lg:1.375rem;
  --text-xl:1.75rem;
  --text-2xl:2.25rem;
  --text-3xl:3rem;
  --text-4xl:3.75rem;
  --leading-tight:1.15;
  --leading-snug:1.35;
  --leading-normal:1.6;

  /* espaçamento (escala 8pt) */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --space-9:6rem;
  --space-10:8rem;

  /* raios e sombras */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:24px;
  --radius-full:999px;
  --shadow-card:0 24px 60px -24px rgba(0,0,0,.65);
  --shadow-card-sm:0 12px 30px -14px rgba(0,0,0,.55);
  --shadow-gold-glow:0 0 50px -10px rgba(212,175,55,.35);
  --border-gold:1px solid rgba(212,175,55,.35);
  --border-subtle:1px solid rgba(244,241,234,.1);

  /* layout */
  --container-max:1240px;
  --container-pad:1.25rem;
  --header-h:76px;
  --topbar-h:36px;

  /* z-index */
  --z-header:100;
  --z-dropdown:150;
  --z-bottombar:300;
  --z-overlay:400;
  --z-modal:500;
  --z-toast:600;

  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:150ms;
  --dur-base:250ms;
  --dur-slow:400ms;

  --chevron-icon:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23D4AF37' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  color-scheme:dark;
}

@media (min-width:768px){
  :root{ --container-pad:2rem; --header-h:88px; }
}
@media (min-width:1024px){
  :root{
    --text-3xl:3.5rem;
    --text-4xl:4.5rem;
    --container-pad:2.5rem;
  }
}

*,*::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:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
body{
  min-height:100dvh;
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--text-light);
  background:var(--black);
  overflow-x:hidden;
}
img,picture,video,canvas,svg{display:block;max-width:100%;}
img{height:auto;}
input,button,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;padding:0;}
p{max-width:75ch;}

h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:700;
  color:var(--cream);
  line-height:var(--leading-tight);
  letter-spacing:-0.01em;
}
h1{font-size:var(--text-3xl);}
h2{font-size:var(--text-2xl);}
h3{font-size:var(--text-xl);}
h4{font-size:var(--text-lg);}

.eyebrow{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:var(--text-xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
}

/* foco visível — acessibilidade */
:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
  border-radius:4px;
}
a:focus-visible,button:focus-visible{outline-offset:4px;}

.skip-link{
  position:absolute;
  left:1rem;top:-100px;
  background:var(--gold);
  color:var(--black);
  padding:.75rem 1.25rem;
  border-radius:var(--radius-sm);
  font-weight:700;
  z-index:1000;
  transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{top:1rem;}

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}

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

.section{ padding-block:var(--space-8); }
@media (min-width:1024px){ .section{ padding-block:var(--space-9); } }
.section-tight{ padding-block:var(--space-6); }

.section-head{ max-width:640px; margin-bottom:var(--space-6); }
.section-head p{ color:var(--text-light); margin-top:var(--space-3); }
.section-head.center{ margin-inline:auto; text-align:center; }

::selection{ background:var(--gold); color:var(--black); }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--black); }
::-webkit-scrollbar-thumb{ background:var(--charcoal-2); border-radius:var(--radius-full); }
