:root {
  /* ==========================================================================
     PALETA DE CORES PRIMÁRIA & EDITORIAL
     ========================================================================== */
  --color-forest: #0D2C27;
  --color-ivory: #F4F1E9;
  --color-sand: #ECE7DD;
  --color-gold: #B49361;
  --color-gold-light: #C9AE7E;
  --color-ink: #17201E;
  --color-white: #FAF9F5;

  /* ==========================================================================
     TOKENS SEMÂNTICOS DE SUPERFÍCIE E TEXTO
     ========================================================================== */
  --bg-primary: var(--color-ivory);
  --bg-secondary: var(--color-sand);
  --bg-contrast: var(--color-forest);
  --bg-pure: var(--color-white);

  --text-primary: var(--color-ink);
  --text-muted: rgba(23, 32, 30, 0.72);
  --text-subtle: rgba(23, 32, 30, 0.46);
  --text-contrast: var(--color-ivory);
  --text-contrast-muted: rgba(244, 241, 233, 0.68);
  --text-gold: var(--color-gold);

  /* ==========================================================================
     BORDAS E LINHAS DIVISÓRIAS EDITORIAIS
     Linhas finas, precisas e estruturais. Proibido sombras pesadas ou glassmorphism.
     ========================================================================== */
  --border-hairline: 1px solid rgba(13, 44, 39, 0.18);
  --border-hairline-subtle: 1px solid rgba(13, 44, 39, 0.08);
  --border-hairline-gold: 1px solid rgba(180, 147, 97, 0.35);
  --border-contrast: 1px solid rgba(244, 241, 233, 0.16);

  --radius-sharp: 0px;
  --radius-subtle: 2px;

  /* ==========================================================================
     SISTEMA DE ESPAÇAMENTO FLUIDO (CSS CLAMP)
     Section Vertical Rhythm:
     Desktop: 120px a 180px
     Mobile: 80px a 110px
     ========================================================================== */
  --space-section: clamp(5rem, 3.8rem + 4.5vw, 11.25rem); /* ~80px (mobile) a 180px (1440px desktop) */
  --space-section-sm: clamp(3.5rem, 2.8rem + 2.8vw, 7.5rem); /* ~56px a 120px */
  
  --space-3xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);   /* 4px - 6px */
  --space-2xs: clamp(0.5rem, 0.42rem + 0.3vw, 0.75rem);    /* 8px - 12px */
  --space-xs:  clamp(0.75rem, 0.65rem + 0.4vw, 1rem);      /* 12px - 16px */
  --space-sm:  clamp(1rem, 0.85rem + 0.6vw, 1.5rem);       /* 16px - 24px */
  --space-md:  clamp(1.5rem, 1.25rem + 1vw, 2.5rem);       /* 24px - 40px */
  --space-lg:  clamp(2.5rem, 2.1rem + 1.8vw, 4.5rem);      /* 40px - 72px */
  --space-xl:  clamp(4rem, 3.2rem + 3.2vw, 7rem);          /* 64px - 112px */

  /* ==========================================================================
     SISTEMA DE GRID & LARGURA
     ========================================================================== */
  --viewport-max: 1440px;
  --content-max: 1240px;
  --grid-gutter: 24px;
  --grid-columns: 12;
  --page-padding-inline: clamp(1rem, 0.6rem + 2vw, 2.5rem); /* 16px (mobile) a 40px (desktop) */

  /* ==========================================================================
     TIPOGRAFIA: FONT FAMILIES
     ========================================================================== */
  --font-primary: 'Instrument Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-cursive: 'Playfair Display', serif;

  /* ==========================================================================
     ESCALA TIPOGRÁFICA FLUIDA (INSTRUMENT SANS)
     Regra: Nunca abaixo de 16px para texto principal (body)
     ========================================================================== */
  --font-size-display: clamp(2.35rem, 1.6rem + 3.2vw, 5rem);   /* 38px a 80px */
  --font-size-h1:      clamp(2rem, 1.45rem + 2.4vw, 3.85rem);  /* 32px a 62px */
  --font-size-h2:      clamp(1.5rem, 1.25rem + 1.2vw, 2.5rem); /* 24px a 40px */
  --font-size-h3:      clamp(1.2rem, 1.08rem + 0.5vw, 1.65rem);/* 19px a 26px */
  --font-size-body-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.35rem); /* 18px a 21.6px */
  --font-size-body:    clamp(1rem, 0.98rem + 0.15vw, 1.125rem); /* 16px a 18px (MÍNIMO 16PX) */
  --font-size-body-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); /* 14px a 15px */

  /* Tipografia Técnica (IBM Plex Mono) */
  --font-size-mono-index: clamp(0.8125rem, 0.8rem + 0.05vw, 0.875rem); /* 13px - 14px */
  --font-size-mono-label: clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem); /* 11px - 12px */

  /* Line Heights Editoriais */
  --lh-tight: 1.04;
  --lh-heading: 1.12;
  --lh-subheading: 1.25;
  --lh-body-lg: 1.5;
  --lh-body: 1.62;
  --lh-mono: 1.4;

  /* Letter Spacings (Tracking Editorial) */
  --ls-display: -0.035em;
  --ls-h1: -0.03em;
  --ls-h2: -0.025em;
  --ls-h3: -0.015em;
  --ls-body: -0.005em;
  --ls-mono-label: 0.12em;
  --ls-mono-index: 0.08em;

  /* Pesos */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Tom de Ouro Acessível para Texto/Microinformações sobre Fundo Claro (WCAG AA >= 4.5:1) */
  --color-gold-accessible: #7A5E32;
}

/* ==========================================================================
   ACESSIBILIDADE: FOCO VISÍVEL & SKIP LINK
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--color-forest);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  background-color: var(--color-forest);
  color: var(--color-ivory);
  padding: 12px 20px;
  z-index: 9999;
  font-family: var(--font-primary);
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--radius-subtle);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}