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

/* -------- @font-face · fontes primárias 2026-05-26 --------
   OPTI Serlio       → display/heading (wordmark L'ACQUA MARINA, todos os títulos)
   New Horizon Titling → titling secundário caps (HOME RESORT, eyebrows, labels)
   Arquivos em ./assets/fonts/
*/
@font-face {
  font-family: 'OPTI Serlio';
  src: url('./assets/fonts/OPTISerlio.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'New Horizon Titling';
  src: url('./assets/fonts/New Horizon Titling W00 Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------- Paleta OFICIAL · revisão 2026-05-22 (5 cores · sem terra) -------- */
  --cream:         #EFE9DD;   /* fundo principal 90% · RGB 239·233·221 */
  --ink:           #0A0A0A;   /* tipografia sobre cream · RGB 10·10·10 */
  --dark:          #0E1518;   /* fundo noturno · stories · RGB 14·21·24 */
  --teal:          #1F3A4D;   /* acento sobre cream · RGB 31·58·77 · ratio 7.8:1 */
  --gold:          #D4A04C;   /* destaque · emblema · rule · folio · kicker */
  --sand:          #E8DFC9;   /* areia clara · variação leve do cream */

  /* -------- Variações funcionais (opacidade) -------- */
  --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 — só na foto, não na UI) -------- */
  --photo-gold:    #D4A04C;   /* hora dourada */
  --photo-green:   #5FA89E;   /* verde-lago Corumbá (só no shot fotográfico) */
  --photo-sand:    #E8DFC9;   /* areia / cedro claro */
  --photo-ink:     #0A0A0A;

  /* -------- Famílias tipográficas · OFICIAL revisão 2026-05-26 --------
     PRIMARY  · OPTI Serlio          → wordmark L'ACQUA MARINA + todos os títulos
     TITLING  · New Horizon Titling  → HOME RESORT, eyebrows, micro-caps
     BODY     · Host Grotesk         → corpo de texto, caption, micro, UI
     LEGACY   · Fraunces             → fallback histórico (mantido como fallback)
  */
  --f-display:  'OPTI Serlio', 'Fraunces', 'Times New Roman', serif;
  --f-titling:  'New Horizon Titling', 'OPTI Serlio', serif;
  --f-body:     'Host Grotesk', 'Inter', system-ui, sans-serif;
  --f-pdf-only: 'Britti Sans', 'Host Grotesk', sans-serif;   /* exclusivo PDF offline */
  --f-legacy:   'Fraunces', 'Times New Roman', serif;        /* só onde reuso explícito */

  /* -------- Pesos autorizados -------- */
  --w-display-regular: 400;     /* OPTI Serlio só tem regular */
  --w-display-italic:  400;
  --w-titling-light:   300;     /* New Horizon Titling Light */
  --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
   ============================================================ */

/* PRIMARY · OPTI Serlio · titles, hero, wordmark, headlines */
.serlio,
.fraunces {              /* alias .fraunces mantido pra retrocompat */
  font-family: var(--f-display);
  font-weight: var(--w-display-regular);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}

.serlio-italic,
.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);
}

/* TITLING SECONDARY · New Horizon Titling · caps elegantes (HOME RESORT, eyebrows) */
.titling {
  font-family: var(--f-titling);
  font-weight: var(--w-titling-light);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-strong);
  line-height: 1.1;
}

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