/* Plataforma — Foundations
   Direção: sidebar quase-preta + conteúdo em creme claro, ambos em vidro
   translúcido (blur). Acento único: verde-oliva. Tipografia: Newsreader
   (serifa, títulos e citações em itálico) + Public Sans (interface) +
   IBM Plex Mono (referências, datas, dados tabulares). */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;1,500&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ===== Color tokens (raw) ===== */
  --octale-navy:        #16180F;   /* Ink — texto estrutural sobre o fundo claro */
  --octale-off-white:   #EAEDE6;   /* Superfície padrão — cinza-pedra com viés verde (não creme) */
  --octale-neon:        #5C6640;   /* Acento único — verde-oliva */
  --octale-dark-purple: #0D0D0B;   /* Sidebar / superfícies quase-pretas */
  --octale-white:       #FFFFFF;
  --octale-black:       #16180F;
  --octale-grey-555:    #6B6F63;   /* Texto secundário — viés verde para combinar com o acento */

  /* ===== Semantic color tokens ===== */
  --bg:              var(--octale-off-white);
  --bg-dark:         var(--octale-dark-purple);
  --bg-deep:         var(--octale-dark-purple);

  --fg:              var(--octale-black);
  --fg-on-dark:      #EAEDE6;
  --fg-muted:        var(--octale-grey-555);
  --fg-brand:        var(--octale-navy);

  --accent:          var(--octale-neon);
  --accent-fg:       #FFFFFF;

  --border:          rgba(23, 23, 15, 0.10);
  --border-strong:   var(--octale-navy);

  --gradient-brand:  linear-gradient(160deg, #0D0D0B 0%, #16160F 100%);

  /* ===== Glass — painéis translúcidos ===== */
  --glass-fill:       rgba(255,255,255,.55);
  --glass-fill-2:     rgba(255,255,255,.26);
  --glass-border:     rgba(23,23,15,.10);
  --glass-hi:         rgba(255,255,255,.85);
  --glass-blur:       18px;
  --glass-shadow:     0 16px 40px rgba(23,23,15,.10), 0 2px 6px rgba(23,23,15,.06);

  --sb-fill:          rgba(255,255,255,.05);
  --sb-fill-2:        rgba(255,255,255,.015);
  --sb-border:        rgba(234,237,230,.12);
  --sb-hi:            rgba(255,255,255,.16);
  --sb-ink-muted:     #83816F;
  --sb-accent:        #8A9A5B;   /* verde mais claro — contraste sobre o preto */

  /* ===== Type tokens ===== */
  --font-sans:    "Public Sans", system-ui, -apple-system, "Trebuchet MS", sans-serif;
  --font-display: "Newsreader", Georgia, serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-note:        12px;
  --fs-body:        14px;
  --fs-subtitle:    16px;
  --fs-label:       14px;
  --fs-h3:          20px;
  --fs-h2:          28px;
  --fs-h1:          40px;
  --fs-display:     56px;

  --lh-doc:        1.15;
  --lh-prose:      1.5;
  --lh-tight:      1.1;

  --tracking-caps: 0.1em;
  --tracking-tight: -0.01em;

  /* ===== Spacing & shape ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-0: 0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23,23,15,0.08);
  --shadow-md: 0 6px 24px rgba(23,23,15,0.10);
  --shadow-deep: 0 24px 64px rgba(13,13,11,0.35);

  --container: 1200px;
  --gutter: 24px;
}

/* ---------- Base ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Semantic type roles */
.pac-display, h1.pac {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-brand);
}
h1, .pac-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .pac-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.2;
}
h3, .pac-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  font-style: italic;
  line-height: 1.25;
}
.pac-section-title {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-on-dark);
  background: var(--bg-dark);
  padding: 6px 12px;
  display: inline-block;
}
.pac-subtitle {
  font-size: var(--fs-subtitle);
  font-weight: 600;
  color: var(--fg-brand);
}
.pac-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
}
.pac-eyebrow::before {
  content: ""; display: inline-block; width: 14px; height: 1px;
  background: currentColor; opacity: .6; margin-right: 8px; vertical-align: middle;
}
p, .pac-body {
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
}
.pac-clause {
  font-size: var(--fs-body);
  line-height: var(--lh-doc);
  text-align: justify;
  color: var(--octale-black);
}
.pac-note, small {
  font-size: var(--fs-note);
  color: var(--fg-muted);
}

/* Surfaces */
.pac-surface-light { background: var(--bg); color: var(--fg); }
.pac-surface-dark  { background: var(--bg-dark); color: var(--fg-on-dark); }
.pac-surface-deep  { background: var(--bg-deep); color: var(--fg-on-dark); }
.pac-surface-grad  { background: var(--gradient-brand); color: var(--fg-on-dark); }

/* Accent rule */
.pac-rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--accent);
  border: 0;
  margin: var(--space-4) 0;
}

/* Glass panel — utilitário reutilizável */
.pac-glass {
  background: linear-gradient(155deg, var(--glass-fill), var(--glass-fill-2));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}