/* ============================================================
   HELENA NAVES — DESIGN SYSTEM
   colors_and_type.css · v1.0.0 · @helenaanaves
   Single source of truth for color + typography tokens.
   Import in every deliverable:  <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---- Fonts -------------------------------------------------
   Família 1 — Amsterdam Four (assinatura emocional / cursiva).
   Self-hosted from the uploaded brand file (fonts/amsterdam-four-ttf.ttf).
   Parisienne is kept only as a last-resort fallback if the file fails.

   Família 2 — Montserrat (toda a hierarquia editorial / UI).
   ------------------------------------------------------------ */
@font-face {
  font-family: 'AmsterdamFour';
  src: url('fonts/amsterdam-four-ttf.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ---------- BASES · neutras quentes ---------- */
  --color-creme:        #F5EFE6;  /* fundo principal de tudo */
  --color-creme-claro:  #FAF6EE;  /* fundo secundário, cards, respiro */
  --color-papel:        #EFE7DA;  /* cards elevados, blocos */

  /* ---------- TEXTO · tons de café ---------- */
  --color-cafe-primary:   #3D2E26; /* texto principal, títulos */
  --color-cafe-secondary: #5C4A40; /* texto secundário, descrições */
  --color-cinza-bege:     #8B7E76; /* legendas, numeração, metadados */
  --color-cinza-suave:    #B5A89E; /* placeholders, desabilitados */

  /* ---------- ACENTOS · alma da marca ---------- */
  --color-rosa-velho:    #D4A5A5;  /* acento feminino sutil */
  --color-rosa-soft:     #E8C5C5;  /* tags, badges, destaque sutil */
  --color-dourado:       #C9A876;  /* COR ASSINATURA — cursivas, linha editorial */
  --color-dourado-escuro:#A8895C;  /* acento sóbrio, bordas, hover dourado */
  --color-vinho:         #8B3A3A;  /* CTA especial, acento focal (1x por peça) */
  --color-vinho-suave:   #A85555;  /* hover de CTA, estados ativos */

  /* ---------- FUNCIONAIS · estrutura ---------- */
  --color-borda:         #E0D5C6;  /* bordas de cards, separadores */
  --color-borda-subtle:  #EAE2D3;  /* dividers, linhas de tabela */
  --color-overlay:       rgba(61, 46, 38, 0.6); /* sobre fotos */

  /* ---------- SEMÂNTICOS ---------- */
  --bg:          var(--color-creme);
  --bg-alt:      var(--color-creme-claro);
  --bg-elevated: var(--color-papel);
  --fg:          var(--color-cafe-primary);
  --fg-muted:    var(--color-cafe-secondary);
  --fg-subtle:   var(--color-cinza-bege);
  --fg-disabled: var(--color-cinza-suave);
  --accent:      var(--color-dourado);
  --accent-strong: var(--color-vinho);
  --border:      var(--color-borda);

  /* ---------- TIPOGRAFIA · famílias ---------- */
  --font-cursiva:   'AmsterdamFour', 'Parisienne', cursive;
  --font-principal: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* ---------- PESOS Montserrat ---------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- ESCALA TIPOGRÁFICA ---------- */
  --fs-hero-cursivo: 72px; /* Amsterdam Four · hero landing, capa eBook */
  --fs-display-1:    56px; /* Montserrat 700 · título de página */
  --fs-display-2:    44px; /* Montserrat 600 · sub-hero, título de seção */
  --fs-h1:           36px; /* Montserrat 700 */
  --fs-h2:           28px; /* Montserrat 600 */
  --fs-h3:           14px; /* Montserrat 600 · eyebrow uppercase */
  --fs-body:         16px; /* Montserrat 300-400 */
  --fs-body-sm:      14px; /* Montserrat 300 */
  --fs-caption:      12px; /* Montserrat 400 */
  --fs-cursivo-md:   44px; /* Amsterdam Four · capas de carrossel (36–48) */
  --fs-cursivo-sm:   24px; /* Amsterdam Four · assinatura, detalhes (20–24) */

  --lh-tight: 1.2; /* @kind font */
  --lh-snug:  1.4; /* @kind font */
  --lh-body:  1.7; /* @kind font */

  /* ---------- ESPAÇAMENTO ---------- */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* ---------- BORDAS / RAIO ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ---------- SOMBRAS · sempre quentes, nunca preto ---------- */
  --shadow-subtle:   0 1px 3px rgba(61, 46, 38, 0.06);
  --shadow-soft:     0 4px 12px rgba(61, 46, 38, 0.08);
  --shadow-elevated: 0 8px 24px rgba(61, 46, 38, 0.10);
}

/* ============================================================
   SEMANTIC TYPE CLASSES — apply directly to elements
   ============================================================ */
.ds-hero-cursivo {
  font-family: var(--font-cursiva);
  font-size: var(--fs-hero-cursivo);
  font-weight: 400;
  color: var(--color-dourado);
  line-height: 1.1;
}
.ds-display-1 {
  font-family: var(--font-principal);
  font-size: var(--fs-display-1);
  font-weight: var(--weight-bold);
  color: var(--color-cafe-primary);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
}
.ds-display-2 {
  font-family: var(--font-principal);
  font-size: var(--fs-display-2);
  font-weight: var(--weight-semibold);
  color: var(--color-cafe-primary);
  line-height: var(--lh-tight);
}
.ds-h1 {
  font-family: var(--font-principal);
  font-size: var(--fs-h1);
  font-weight: var(--weight-bold);
  color: var(--color-cafe-primary);
  line-height: var(--lh-tight);
}
.ds-h2 {
  font-family: var(--font-principal);
  font-size: var(--fs-h2);
  font-weight: var(--weight-semibold);
  color: var(--color-cafe-primary);
  line-height: var(--lh-snug);
}
.ds-eyebrow,
.eyebrow {
  font-family: var(--font-principal);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-cinza-bege);
}
.ds-body {
  font-family: var(--font-principal);
  font-size: var(--fs-body);
  font-weight: var(--weight-light);
  color: var(--color-cafe-secondary);
  line-height: var(--lh-body);
}
.ds-body-sm {
  font-family: var(--font-principal);
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-light);
  color: var(--color-cafe-secondary);
  line-height: var(--lh-body);
}
.ds-caption {
  font-family: var(--font-principal);
  font-size: var(--fs-caption);
  font-weight: var(--weight-regular);
  color: var(--color-cinza-bege);
}
.ds-cursivo-md {
  font-family: var(--font-cursiva);
  font-size: var(--fs-cursivo-md);
  color: var(--color-dourado);
  line-height: 1.1;
}
.ds-cursivo-sm {
  font-family: var(--font-cursiva);
  font-size: var(--fs-cursivo-sm);
  color: var(--color-dourado);
  line-height: 1.1;
}
.editorial-number {
  font-family: var(--font-principal);
  font-style: italic;
  font-size: 13px;
  color: var(--color-dourado);
  letter-spacing: 0.1em;
}

/* ============================================================
   GRAIN OVERLAY — apply to body for the paper texture
   ============================================================ */
.ds-grain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}