/* ============================================================
   L'Acqua Marina · Design Tokens
   Consumido pelo pipeline HTML + Chrome headless em _HTML_source/
   Fonte única de verdade pra cores, tipografia, spacing e ratios.
   ============================================================ */

:root {
  /* -------- Paleta primária (brand) -------- */
  --cream:         #EFE9DD;   /* fundo claro padrão */
  --ink:           #0A0A0A;   /* texto sobre cream */
  --dark:          #0E1518;   /* fundo escuro padrão */
  --teal:          #1F3A4D;   /* acento sobre cream */
  --terra:         #B56B3F;   /* acento sobre dark */
  --gold:          #D4A04C;   /* emblema / rule / folio / kicker-on-dark */

  /* -------- Variações funcionais -------- */
  --gold-weak:     rgba(212, 160, 76, 0.35);   /* rule Neo-Swiss */
  --gold-subtle:   rgba(212, 160, 76, 0.15);   /* halo discreto */
  --cream-a08:     rgba(239, 233, 221, 0.8);   /* micro-copy sobre dark */
  --cream-a06:     rgba(239, 233, 221, 0.6);   /* folio sobre dark */
  --ink-a08:       rgba(10, 10, 10, 0.8);
  --ink-a06:       rgba(10, 10, 10, 0.6);      /* disclaimer sobre cream */
  --overlay-dark:  rgba(10, 10, 10, 0.55);     /* grad overlay em foto */
  --overlay-dark-top:   rgba(10, 10, 10, 0.0);
  --overlay-dark-mid:   rgba(10, 10, 10, 0.25);
  --overlay-dark-deep:  rgba(10, 10, 10, 0.72);

  /* -------- Paleta fotográfica (grading) -------- */
  --photo-gold:    #D4A04C;   /* hora dourada */
  --photo-green:   #5FA89E;   /* verde-lago Corumbá */
  --photo-terra:   #A8583C;   /* terra seca Cerrado */
  --photo-sand:    #E8DFC9;   /* areia / cedro claro */
  --photo-ink:     #0A0A0A;

  /* -------- Famílias tipográficas -------- */
  --f-display:  'Fraunces', 'Times New Roman', serif;
  --f-body:     'Host Grotesk', 'Inter', system-ui, sans-serif;
  --f-pdf-only: 'Britti Sans', 'Host Grotesk', sans-serif;   /* exclusivo PDF offline */

  /* -------- Pesos autorizados -------- */
  --w-display-regular: 400;
  --w-display-italic:  400;   /* sempre italic via font-style */
  --w-body-regular:    400;
  --w-body-medium:     500;
  --w-body-semibold:   600;

  /* -------- Escala tipográfica (post 1080×1350) -------- */
  --t-headline-xl:   96px;   /* capa hero */
  --t-headline-l:    72px;   /* quote card */
  --t-headline-m:    56px;   /* capa carrossel */
  --t-headline-s:    40px;   /* slide interno */
  --t-kicker:        12px;   /* caps +0.18em */
  --t-body:          18px;
  --t-caption:       14px;
  --t-micro:         11px;   /* header-strip caps */
  --t-folio:         9px;

  /* -------- Letter-spacing -------- */
  --ls-caps-strong:   0.18em;
  --ls-caps-medium:   0.12em;
  --ls-caps-soft:     0.08em;
  --ls-display:       -0.01em;
  --ls-body:          0;

  /* -------- Line-height -------- */
  --lh-display:  1.05;
  --lh-body:     1.45;
  --lh-caption:  1.35;

  /* -------- Spacing scale (múltiplos de 8) -------- */
  --s-1:   8px;
  --s-2:   16px;
  --s-3:   24px;
  --s-4:   32px;
  --s-5:   48px;
  --s-6:   64px;
  --s-7:   96px;
  --s-8:   128px;

  /* -------- Margens seguras -------- */
  --safe-post-4x5:  72px;    /* 1080×1350 */
  --safe-story:     96px;    /* 1080×1920 — acima de área UI Stories */
  --safe-pdf:       96px;    /* A4 landscape */

  /* -------- Grid Neo-Swiss header-strip -------- */
  --grid-header:    1fr 2fr 1fr;
  --header-pad-v:   18px;
  --header-pad-h:   48px;

  /* -------- Rules / separators -------- */
  --rule-thickness: 0.5px;
  --rule-color:     var(--gold-weak);

  /* -------- Logo sizes (canônicos) -------- */
  --logo-squad-h:    20px;   /* 5mm em PDF */
  --logo-lacqua-h:   36px;   /* 9mm em PDF */
  --emblem-h-sm:     40px;
  --emblem-h-md:     64px;
  --emblem-h-lg:     96px;

  /* -------- Aspect ratios de saída -------- */
  --r-feed:     1080 / 1350;   /* 4:5 */
  --r-story:    1080 / 1920;   /* 9:16 */
  --r-square:   1 / 1;
  --r-pdf:      297 / 210;     /* A4 landscape */
}

/* ============================================================
   Reset + defaults
   ============================================================ */

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

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--f-body);
  font-weight: var(--w-body-regular);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  overflow: hidden;
}

/* ============================================================
   Utilitários tipográficos canônicos
   ============================================================ */

.fraunces {
  font-family: var(--f-display);
  font-weight: var(--w-display-regular);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}

.fraunces-italic {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: var(--w-display-italic);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}

.host-grotesk {
  font-family: var(--f-body);
  font-weight: var(--w-body-regular);
}

.kicker {
  font-family: var(--f-body);
  font-weight: var(--w-body-medium);
  font-size: var(--t-kicker);
  letter-spacing: var(--ls-caps-strong);
  text-transform: uppercase;
  color: var(--gold);
}

.micro {
  font-family: var(--f-body);
  font-weight: var(--w-body-regular);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps-medium);
  text-transform: uppercase;
  color: var(--cream-a08);
}

.disclaimer {
  font-family: var(--f-body);
  font-weight: var(--w-body-regular);
  font-size: 9px;
  letter-spacing: 0;
  color: var(--ink-a06);
  line-height: 1.4;
}

/* ============================================================
   Componentes canônicos
   ============================================================ */

.header-strip {
  display: grid;
  grid-template-columns: var(--grid-header);
  align-items: center;
  padding: var(--header-pad-v) var(--header-pad-h);
  border-bottom: var(--rule-thickness) solid var(--rule-color);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: var(--t-micro);
  font-weight: var(--w-body-medium);
  letter-spacing: var(--ls-caps-medium);
  text-transform: uppercase;
}
.header-strip .h-left   { justify-self: start; }
.header-strip .h-right  { justify-self: end; }
.header-strip .h-center { justify-self: center; color: var(--gold); }

.folio {
  font-family: var(--f-body);
  font-weight: var(--w-body-regular);
  font-size: var(--t-folio);
  letter-spacing: var(--ls-caps-medium);
  color: var(--cream-a06);
}
.folio-num {
  color: var(--gold);
  opacity: 1;
}

.rule-gold {
  height: var(--rule-thickness);
  background: var(--gold);
  opacity: 0.7;
  border: 0;
  margin: 0;
}

.grad-overlay-bottom {
  background: linear-gradient(
    to bottom,
    var(--overlay-dark-top) 0%,
    var(--overlay-dark-mid) 55%,
    var(--overlay-dark-deep) 100%
  );
}

/* ============================================================
   Sobre foto (tipografia editorial)
   ============================================================ */

.on-photo-cream  { color: var(--cream); }
.on-photo-gold   { color: var(--gold); }
.on-photo-shadow { text-shadow: 0 1px 2px rgba(0,0,0,0.35); }

/* ============================================================
   Print / PDF overrides
   ============================================================ */

@media print {
  html, body {
    overflow: visible;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}