/* Adobe Fonts (Typekit) — trocar o href abaixo pelo link do kit ativo */
/* @import url("https://use.typekit.net/SEU_KIT_ID.css"); */
/* Fallback ativo: Georgia — substituir por minion-pro quando o kit estiver conectado */

:root {
  /* ─── Paleta principal ─── */
  --color-branco-papel: #E8E8DB;
  --color-preto: #000000;
  --color-amarelito: #FBFF00;
  --color-vermelho: #9D2B2D;

  /* ─── Cores editoriais — fundos duotone ─── */
  --color-ocre: #80775C;
  --color-rosa: #A3365C;
  --color-mercurio: #21394D;
  --color-marrom: #904313;
  --color-musgo: #4D603E;

  /* ─── Cores editoriais — sobreposição duotone ─── */
  --color-verde-claro: #A0D19A;
  --color-azul-claro: #98DEE9;
  --color-rosa-claro: #E2BAE5;

  /* ─── Tipografia ─── */
  --font-epilogue: 'Epilogue', sans-serif;
  --font-minion: 'minion-pro', Georgia, serif; /* Georgia = fallback temporário */

  /* ─── Pesos ─── */
  --weight-extralight: 200;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-extrabold: 800;

  /* ─── Entrelinha ─── */
  --line-height-min: 1.2;
  --line-height-body: 1.4;

  /* ─── Letter-spacing ─── */
  --ls-title-lg: -0.06em;
  --ls-title-sm: -0.03em;
  --ls-body: -0.02em;
  --ls-label: 0.20em;

  /* ─── Espaçamentos ─── */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  2rem;     /* 32px */
  --space-lg:  4rem;     /* 64px */
  --space-xl:  6rem;     /* 96px */
  --space-xxl: 10rem;    /* 160px */

  /* ─── Container ─── */
  --container-max: 1440px;
  --container-pad: 2rem;

  /* ─── Header ─── */
  --header-height: 64px;
}

/* ═══════════════════════════════════════════════
   COMBINAÇÕES DUOTONE _001–_018
   Cada .code-XXX define as custom properties
   usadas pelo componente .duotone-wrapper
   ═══════════════════════════════════════════════ */

.code-001 { --dt-fundo: #80775C; --dt-sobre: #E2BAE5; }
.code-002 { --dt-fundo: #A3365C; --dt-sobre: #98DEE9; }
.code-003 { --dt-fundo: #21394D; --dt-sobre: #A0D19A; }
.code-004 { --dt-fundo: #904313; --dt-sobre: #98DEE9; }
.code-005 { --dt-fundo: #4D603E; --dt-sobre: #A0D19A; }
.code-006 { --dt-fundo: #9D2B2D; --dt-sobre: #E2BAE5; }
.code-007 { --dt-fundo: #80775C; --dt-sobre: #A0D19A; }
.code-008 { --dt-fundo: #A3365C; --dt-sobre: #E2BAE5; }
.code-009 { --dt-fundo: #21394D; --dt-sobre: #98DEE9; }
.code-010 { --dt-fundo: #904313; --dt-sobre: #E2BAE5; }
.code-011 { --dt-fundo: #4D603E; --dt-sobre: #98DEE9; }
.code-012 { --dt-fundo: #9D2B2D; --dt-sobre: #A0D19A; }
.code-013 { --dt-fundo: #80775C; --dt-sobre: #98DEE9; }
.code-014 { --dt-fundo: #A3365C; --dt-sobre: #A0D19A; }
.code-015 { --dt-fundo: #21394D; --dt-sobre: #E2BAE5; }
.code-016 { --dt-fundo: #904313; --dt-sobre: #A0D19A; }
.code-017 { --dt-fundo: #4D603E; --dt-sobre: #E2BAE5; }
.code-018 { --dt-fundo: #9D2B2D; --dt-sobre: #98DEE9; }

/* ─── Componente duotone ───
   Duotone real de DUAS cores: sombras → cor escura (--dt-fundo),
   luzes → cor clara (--dt-sobre).
   Técnica: base = cor CLARA; imagem em cinza com `multiply` (escurece a
   base nas áreas escuras da foto, mapeando-as para preto→claro); por cima,
   a cor ESCURA com `lighten` eleva os pretos até o tom escuro — assim as
   sombras ficam ocre e as luzes ficam rosa/azul/verde claro. */
.duotone-wrapper {
  position: relative;
  background-color: var(--dt-sobre);
  overflow: hidden;
}

.duotone-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: grayscale(100%) contrast(1.05);
  opacity: 1;
}

.duotone-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--dt-fundo);
  mix-blend-mode: lighten;
  pointer-events: none;
}

/* Sem imagem (placeholder): mostra a cor escura pura. */
.duotone-wrapper--placeholder {
  background-color: var(--dt-fundo);
}

.duotone-wrapper--placeholder::after {
  display: none;
}