/* ============================================================
   ARCO FISCAL — DESIGN TOKENS
   tokens.css · Fase 2 · Mai 2026
   Importar antes de qualquer outro CSS.
   ============================================================ */

/* ------------------------------------------------------------
   1. GOOGLE FONTS
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=DM+Mono:wght@300;400&family=Cinzel:wght@400;600&display=swap');


/* ------------------------------------------------------------
   2. CUSTOM PROPERTIES
   ------------------------------------------------------------ */
:root {

  /* ----------------------------------------------------------
     CORES
     ---------------------------------------------------------- */

  /* Paleta base */
  --cream:  #ECE3DC;   /* fundo principal */
  --taupe:  #9B8A78;   /* acentos, texto secundário */
  --brown:  #59493C;   /* texto corpo, fundo escuro médio */
  --black:  #1C1815;   /* fundo escuro, texto principal */
  --cream2: #E0D5CB;   /* fundo alternativo, hover states */
  --cream3: #F5F0EB;   /* fundo mais claro */

  /* Semânticas de fundo */
  --bg-primary:   var(--cream);
  --bg-light:     var(--cream3);
  --bg-mid:       var(--cream2);
  --bg-dark:      var(--brown);
  --bg-darkest:   var(--black);

  /* Semânticas de texto */
  --text-primary:   var(--black);
  --text-body:      var(--brown);
  --text-secondary: var(--taupe);
  --text-on-dark:   var(--cream);
  --text-accent:    var(--taupe);

  /* Bordas / linhas decorativas */
  --border-light:  rgba(155, 138, 120, 0.25);  /* taupe a 25% */
  --border-mid:    rgba(89, 73, 60, 0.35);      /* brown a 35% */
  --border-dark:   rgba(236, 227, 220, 0.15);   /* cream a 15% (sobre fundo escuro) */

  /* ----------------------------------------------------------
     TIPOGRAFIA — FAMÍLIAS
     ---------------------------------------------------------- */

  --font-serif:   'Cormorant Garamond', Georgia, serif;   /* headlines, quotes, hero */
  --font-mono:    'DM Mono', 'Courier New', monospace;    /* labels, tags, nav links */
  --font-display: 'Cinzel', Georgia, serif;               /* marca, títulos formais */

  /* ----------------------------------------------------------
     TIPOGRAFIA — TAMANHOS (fluidos com clamp)
     ---------------------------------------------------------- */

  /* Display / Hero */
  --text-h1:      clamp(3.5rem, 6vw, 8rem);
  --text-h2:      clamp(2rem, 3.5vw, 4rem);
  --text-h3:      clamp(1.4rem, 2.5vw, 2.25rem);
  --text-h4:      clamp(1.1rem, 1.8vw, 1.5rem);

  /* Body */
  --text-body-lg: 1.1rem;
  --text-body:    1rem;
  --text-body-sm: 0.925rem;

  /* UI micro */
  --text-label:   0.7rem;    /* eyebrow, tags, nav — era 0.58rem */
  --text-tag:     0.65rem;   /* tags menores — era 0.55rem */
  --text-legal:   0.8rem;    /* footer legal, rodapés — era 0.75rem */

  /* ----------------------------------------------------------
     TIPOGRAFIA — PESOS
     ---------------------------------------------------------- */

  --weight-light:   300;
  --weight-regular: 400;
  --weight-semi:    600;

  /* ----------------------------------------------------------
     TIPOGRAFIA — ESPAÇAMENTO DE LETRAS
     ---------------------------------------------------------- */

  --tracking-tight:   -0.025em;  /* H1 grandes */
  --tracking-normal:   0em;
  --tracking-wide:     0.08em;   /* subtítulos leves */
  --tracking-wider:    0.12em;
  --tracking-widest:   0.18em;   /* labels */
  --tracking-ultra:    0.22em;   /* eyebrow, nav mono */

  /* ----------------------------------------------------------
     TIPOGRAFIA — LINE HEIGHT
     ---------------------------------------------------------- */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.75;  /* body text padrão */
  --leading-loose:  2;

  /* ----------------------------------------------------------
     ESPAÇAMENTO
     ---------------------------------------------------------- */

  --space-1:   0.25rem;    /*  4px */
  --space-2:   0.5rem;     /*  8px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */
  --space-32:  8rem;       /* 128px */

  /* Secções — espaçamento vertical interno */
  --section-sm:  clamp(3rem, 6vw, 5rem);
  --section-md:  clamp(4rem, 8vw, 7rem);
  --section-lg:  clamp(5rem, 10vw, 9rem);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --max-width:        1320px;
  --max-width-text:   720px;   /* colunas de texto corrido */
  --max-width-narrow: 560px;

  --gutter-mobile:  1.25rem;   /* 20px */
  --gutter-tablet:  2rem;      /* 32px */
  --gutter-desktop: 3rem;      /* 48px */

  /* ----------------------------------------------------------
     BORDAS & RAIOS
     ---------------------------------------------------------- */

  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SOMBRAS
     ---------------------------------------------------------- */

  --shadow-sm:  0 1px 3px rgba(28, 24, 21, 0.08);
  --shadow-md:  0 4px 16px rgba(28, 24, 21, 0.10);
  --shadow-lg:  0 12px 40px rgba(28, 24, 21, 0.14);

  /* ----------------------------------------------------------
     TRANSIÇÕES
     ---------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-layout: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ----------------------------------------------------------
     NAVEGAÇÃO
     ---------------------------------------------------------- */

  --nav-height: 60px;   /* mobile */

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */

  --z-base:    0;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}

@media (min-width: 1024px) {
  :root {
    --nav-height: 72px;  /* desktop */
  }
}


/* ------------------------------------------------------------
   3. RESET MÍNIMO
   ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;              /* 1rem = 16px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background-color: var(--bg-primary);
  overflow-x: hidden;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}


/* ------------------------------------------------------------
   4. UTILITÁRIOS TIPOGRÁFICOS
   ------------------------------------------------------------ */

/* Eyebrow — DM Mono, uppercase, taupe */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Headline H1 */
h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

/* Headline H2 */
h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

/* Headline H3 */
h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

/* Headline H4 */
h4, .h4 {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

/* Corpo */
p {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
}

/* Label / Tag mono */
.label,
.tag {
  font-family: var(--font-mono);
  font-size: var(--text-tag);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Itálico de destaque — taupe */
em, .accent-italic {
  font-style: italic;
  color: var(--text-accent);
}

/* Monograma / Display — Cinzel */
.display,
.brand-name {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-wider);
}


/* ------------------------------------------------------------
   5. UTILITÁRIOS DE LAYOUT
   ------------------------------------------------------------ */

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

@media (min-width: 640px) {
  .container {
    padding-inline: var(--gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--gutter-desktop);
  }
}


/* ------------------------------------------------------------
   6. BREAKPOINTS (referência — usar nos ficheiros de componente)
   ------------------------------------------------------------ */

/*
  Base:                    0–639px      (mobile)
  @media (min-width: 640px)   640–1023px   (tablet)
  @media (min-width: 1024px)  1024–1279px  (laptop)
  @media (min-width: 1280px)  1280px+      (desktop)
*/


/* ============================================================
   RESPONSIVE OVERRIDES — correcções globais de responsividade
   ============================================================ */

/* Evitar scroll horizontal em qualquer dispositivo */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Imagens e média sempre contidos */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}