/* ==========================================================================
   Monte Negro Group — Design System (tokens)
   Fontes, cores, tipografia, espaçamento, raios, sombras e grid.
   Edite as variáveis aqui para mudar a identidade em todo o site.
   ========================================================================== */

/* ── Fontes: Nexa (auto-hospedada) ────────────────────────────────────────
   Coloque os arquivos reais em /fonts com estes nomes, ou ajuste os caminhos.
   Se você ainda não tiver os .ttf, o site cai nas fontes de fallback abaixo. */
@font-face {
  font-family: "Nexa";
  font-style: normal;
  font-weight: 200;              /* Nexa ExtraLight */
  font-display: swap;
  src: url("../fonts/Nexa-ExtraLight.ttf") format("truetype");
}
@font-face {
  font-family: "Nexa";
  font-style: normal;
  font-weight: 400;              /* Nexa Book (peso principal) */
  font-display: swap;
  src: url("../fonts/Nexa-Book.ttf") format("truetype");
}
@font-face {
  font-family: "Nexa";
  font-style: normal;
  font-weight: 800;              /* Nexa Heavy */
  font-display: swap;
  src: url("../fonts/Nexa-Heavy.ttf") format("truetype");
}
/* Alias "Nexa Book" → arquivo Book (400), para CSS de marca que use esse nome. */
@font-face {
  font-family: "Nexa Book";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/Nexa-Book.ttf") format("truetype");
}

:root {
  /* ── Paleta base ──────────────────────────────────────────────────────
     Proporção de uso: Branco 55% · Taupe 20% · Chumbo 15% · Bordô 5–8%. */
  --mn-branco-mineral: #F8F6F2;   /* fundo principal */
  --mn-branco-puro:    #FFFFFF;   /* cards, superfícies elevadas */
  --mn-taupe:          #A89D91;   /* neutro premium */
  --mn-taupe-claro:    #D8D1C8;   /* neutro claro — separadores */
  --mn-taupe-escuro:   #7E746A;   /* neutro escuro — detalhes, hover */
  --mn-bordo:          #5A1F2B;   /* assinatura — ação principal, labels */
  --mn-bordo-escuro:   #3E141E;   /* bordô pressionado / profundidade */
  --mn-chumbo:         #2F3234;   /* texto e estrutura (substitui o preto) */
  --mn-grafite-suave:  #545454;   /* texto corrido secundário */

  /* Terrosos de apoio — só para materiais/fotografia, nunca UI dominante */
  --mn-areia-mineral:  #D4BEA0;
  --mn-marrom-rocha:   #705B49;
  --mn-terra-queimada: #79441B;

  /* ── Linhas e superfícies ─────────────────────────────────────────────── */
  --mn-line:      rgba(47, 50, 52, 0.22);
  --mn-line-soft: rgba(47, 50, 52, 0.08);
  --mn-hairline:  rgba(47, 50, 52, 0.12);

  /* ── Aliases semânticos ───────────────────────────────────────────────── */
  --mn-bg: var(--mn-branco-mineral);
  --mn-surface: var(--mn-branco-puro);
  --mn-surface-inverse: var(--mn-chumbo);
  --mn-surface-accent: var(--mn-bordo);
  --mn-surface-neutral: var(--mn-taupe);
  --mn-text: var(--mn-chumbo);
  --mn-text-secondary: var(--mn-grafite-suave);
  --mn-text-on-dark: var(--mn-branco-mineral);
  --mn-text-muted-on-dark: var(--mn-taupe-claro);
  --mn-accent: var(--mn-bordo);
  --mn-border: var(--mn-line);
  --mn-border-soft: var(--mn-line-soft);

  /* ── Tipografia ───────────────────────────────────────────────────────── */
  --mn-font:        "Nexa Book", "Nexa", "Jost", "Century Gothic", "Futura", Arial, sans-serif;
  --mn-font-display:"Nexa", "Nexa Book", "Jost", "Century Gothic", "Futura", Arial, sans-serif;
  --mn-font-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --mn-weight-thin: 200;
  --mn-weight-light: 300;
  --mn-weight-book: 400;
  --mn-weight-medium: 500;
  --mn-weight-heavy: 800;

  --mn-size-display: clamp(52px, 8vw, 112px);
  --mn-size-h1: clamp(42px, 5vw, 76px);
  --mn-size-h2: clamp(32px, 4vw, 58px);
  --mn-size-h3: 24px;
  --mn-size-lead: 24px;
  --mn-size-body: 18px;
  --mn-size-small: 14px;
  --mn-size-label: 12px;

  --mn-leading-display: 0.96;
  --mn-leading-tight: 1.05;
  --mn-leading-snug: 1.2;
  --mn-leading-body: 1.55;
  --mn-leading-relaxed: 1.65;

  --mn-tracking-display: -0.06em;
  --mn-tracking-title: -0.05em;
  --mn-tracking-tight: -0.035em;
  --mn-tracking-base: -0.01em;
  --mn-tracking-label: 0.14em;
  --mn-tracking-eyebrow: 0.18em;
  --mn-tracking-nav: 0.12em;

  /* ── Espaçamento ──────────────────────────────────────────────────────── */
  --mn-space-1: 8px;
  --mn-space-2: 14px;
  --mn-space-3: 18px;
  --mn-space-4: 22px;
  --mn-space-5: 28px;
  --mn-space-6: 40px;
  --mn-space-7: 56px;
  --mn-space-8: 72px;
  --mn-space-9: 96px;

  --mn-margin-page: 6vw;
  --mn-gutter: 24px;
  --mn-maxwidth: 1180px;

  /* Container da página (classe .mn-wrap em base.css).
     O conteúdo é fluido de ponta a ponta até --mn-page-max; acima disso ele
     trava nessa largura e fica centralizado. O respiro lateral é o MESMO da
     navbar, para que tudo alinhe na mesma linha vertical. */
  --mn-page-max: 1920px;
  --mn-page-pad: 48px;         /* desktop  — igual ao padding do .mn-nav */
  --mn-page-pad-sm: 24px;      /* ≤ 960px  — idem                        */

  /* Distância da borda até onde o conteúdo começa, para elementos que sangram
     de ponta a ponta (faixa arrastável, âncoras do hero) e ainda assim
     precisam alinhar com o .mn-wrap. Até --mn-page-max equivale ao próprio
     padding; acima, soma a metade que sobrou de cada lado.

     Usa 100% — e NÃO 100vw — de propósito: 100vw inclui a barra de rolagem,
     o que desalinharia esses elementos do .mn-wrap em telas largas. Só use
     esta variável em elemento cujo bloco de referência ocupe a largura
     inteira da página. */
  --mn-page-inset: max(
    var(--mn-page-pad),
    calc((100% - var(--mn-page-max)) / 2 + var(--mn-page-pad))
  );

  /* ── Raios ────────────────────────────────────────────────────────────── */
  /* Canto assimétrico assinatura — dois cantos opostos arredondados. */
  --mn-radius-cut: 0 14px 0 14px;
  --mn-radius-cut-lg: 0 28px 0 28px;
  --mn-radius-card: 22px;
  --mn-radius-block: 18px;
  --mn-radius-pill: 999px;
  --mn-radius: 28px;

  /* ── Sombras ──────────────────────────────────────────────────────────── */
  --mn-shadow-card: 0 18px 60px rgba(47, 50, 52, 0.04);
  --mn-shadow-elevated: 0 24px 80px rgba(47, 50, 52, 0.08);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --mn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mn-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --mn-dur-fast: 160ms;
  --mn-dur: 320ms;
  --mn-dur-slow: 640ms;

  --mn-columns: 12;
}