/* Lucas Abreu · Design Tokens — Brandbook v3.1 (azul-noite institucional) */
:root {
  /* ============ COLOR · BRAND (Paleta camadas — ondas) ============ */
  /* Azul-noite — fundo institucional principal */
  --color-brand-night: #0E2A3D;
  --color-brand-night-deep: #07172A;
  --color-brand-night-deepest: #04101E;
  --color-brand-night-light: #1A3D55;

  /* Azul-aço — camada intermediária */
  --color-brand-steel: #2E5A78;
  --color-brand-steel-deep: #1F4359;
  --color-brand-steel-light: #4A7A9A;

  /* Verde-petróleo — acento principal (escuro) */
  --color-brand-teal: #2B6566;
  --color-brand-teal-deep: #1C4849;
  --color-brand-teal-light: #4E8889;

  /* Mostarda/dourado — CTAs e calls de ação */
  --color-brand-gold: #D4A24C;
  --color-brand-gold-deep: #B0843A;
  --color-brand-gold-light: #E5BC72;

  /* Cinza-névoa — superfície clara fria */
  --color-brand-mist: #D6DEE0;
  --color-brand-mist-soft: #E8EDEF;
  --color-brand-mist-deep: #B6C2C5;

  /* MIST blue legacy alias */
  --color-brand-mist-blue: var(--color-brand-mist);
  --color-brand-mist-blue-soft: var(--color-brand-mist-soft);

  /* ============ ALIASES de migração ============ */
  --color-brand-emerald: var(--color-brand-night);
  --color-brand-emerald-deep: var(--color-brand-night);
  --color-brand-emerald-deepest: var(--color-brand-night-deep);
  --color-brand-emerald-light: var(--color-brand-night-light);
  --color-brand-deep-blue: var(--color-brand-night);
  --color-brand-night-blue: var(--color-brand-night-deep);

  /* ============ SURFACE ============ */
  --color-surface-parchment: #F5F1E8;
  --color-surface-parchment-light: #FAF7EF;
  --color-surface-sand: #E8DFC9;

  /* ============ TEXT ============ */
  --color-text-charcoal: #1A1A1A;
  --color-text-graphite: #2C2C2C;
  --color-text-mist: #6B6B6B;

  /* ============ BORDER ============ */
  --color-border-line: #D4CFBE;
  --color-border-line-strong: #B8B0A0;

  /* ============ SPACING ============ */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --space-5xl: 128px;

  /* ============ RADIUS ============ */
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 9999px;

  /* ============ SHADOW (em azul-noite, não em emerald) ============ */
  --shadow-sm: 0 1px 2px rgba(28,43,58,.05);
  --shadow-md: 0 4px 12px rgba(28,43,58,.08);
  --shadow-lg: 0 12px 32px rgba(28,43,58,.10);
  --shadow-xl: 0 24px 64px rgba(28,43,58,.12);

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms; --duration-default: 300ms; --duration-slow: 500ms; --duration-cinema: 800ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-surface-parchment);
  color: var(--color-text-charcoal);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }

/* ============ TIPOGRAFIA — Brandbook v3.1 ============
   Editorial:  Nunito Sans 300 (com itálico)  — headlines, citações, leads
   Operacional: Inter 600 (eyebrows) / Inter 400-500 (body)
*/
.serif,
.serif-italic { font-family: 'Nunito Sans', Georgia, serif; font-weight: 300; }
.serif-italic { font-style: italic; }

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--color-brand-gold);
}
.eyebrow-light { color: var(--color-brand-gold-light); }

.display { font-family: 'Nunito Sans', Georgia, serif; font-weight: 300; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.01em; }
.h1      { font-family: 'Nunito Sans', Georgia, serif; font-weight: 300; font-size: clamp(2rem, 4vw, 3.5rem);   line-height: 1.1;  letter-spacing: -0.01em; }
.h2      { font-family: 'Nunito Sans', Georgia, serif; font-weight: 300; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.005em; }
.h3      { font-family: 'Nunito Sans', Georgia, serif; font-weight: 300; font-size: clamp(1.375rem, 2.5vw, 2rem); line-height: 1.2; }
.h4      { font-family: 'Nunito Sans', Georgia, serif; font-weight: 400; font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.3; }
.lead    { font-family: 'Nunito Sans', Georgia, serif; font-weight: 300; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; }
.body    { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7; }
.body-sm { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.6; }
.caption { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; line-height: 1.5; color: var(--color-text-mist); }

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px)  { .container { padding: 0 32px; } }
@media (min-width: 1024px) { .container { padding: 0 48px; } }
@media (min-width: 1280px) { .container { padding: 0 64px; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-sm); transition: all var(--duration-fast) var(--ease-out); }
.btn-primary { background: var(--color-brand-night-deep); color: var(--color-surface-parchment); }
.btn-primary:hover { background: var(--color-brand-night); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary { background: transparent; color: var(--color-brand-night-deep); border-color: var(--color-brand-night-deep); }
.btn-secondary:hover { background: var(--color-brand-night-deep); color: var(--color-surface-parchment); }
.btn-ghost-light { background: transparent; color: var(--color-surface-parchment); border-color: rgba(245,241,232,0.3); }
.btn-ghost-light:hover { border-color: var(--color-brand-gold-light); color: var(--color-brand-gold-light); }
.btn-gold { background: var(--color-brand-gold-deep); color: var(--color-brand-night-deep); }
.btn-gold:hover { background: var(--color-brand-gold); transform: translateY(-1px); }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Wave SVG bg pattern */
.wave-bg { position: absolute; inset: 0; pointer-events: none; opacity: 0.12; mix-blend-mode: screen; }

/* Link */
a.text-link { color: var(--color-brand-night); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color var(--duration-fast); }
a.text-link:hover { color: var(--color-brand-night-light); }

/* Selection */
::selection { background: var(--color-brand-gold-light); color: var(--color-brand-night-deep); }