/* tokens.css — Casa Lar Luz do Caminho · brand foundation
 * Shared across all pages of the system (brand specimens + site mockups). */

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

:root {
  /* warm dark + white */
  --ink:         oklch(0.22 0.020 60);
  --ink-soft:    oklch(0.36 0.018 60);
  --ink-mute:    oklch(0.55 0.012 60);
  --paper:       #ffffff;                   /* primary surface, matches the logo bg */
  --paper-2:     oklch(0.978 0.010 80);     /* soft cream secondary */
  --paper-3:     oklch(0.955 0.014 78);     /* deeper cream tertiary */
  --line:        oklch(0.91 0.008 70);
  --line-strong: oklch(0.84 0.010 70);

  /* 5-family palette — from the logo dresses */
  --sol:        oklch(0.80 0.130 78);
  --ceramica:   oklch(0.62 0.150 35);
  --folha:      oklch(0.62 0.110 152);
  --ceu:        oklch(0.66 0.110 235);
  --rosa:       oklch(0.72 0.115 5);

  --sol-soft:      oklch(0.94 0.05 78);
  --ceramica-soft: oklch(0.94 0.04 35);
  --folha-soft:    oklch(0.94 0.04 152);
  --ceu-soft:      oklch(0.94 0.03 235);
  --rosa-soft:     oklch(0.96 0.03 5);

  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
}

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

/* ── System nav · floating "← Sistema" link, used on every subpage ─── */

.system-nav {
  position: fixed;
  top: 18px; left: 18px;
  z-index: 100;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform .15s, box-shadow .15s;
}
.system-nav:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-1px); }
.system-nav svg { display: block; }

/* ── Specimen pages (brand/) shared layout ─────────────────────────── */

.specimen {
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 56px 96px;
}
.specimen-kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.specimen-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 88px;
  line-height: 0.94;
  letter-spacing: -0.025em;
  margin: 14px 0 18px;
  color: var(--ink);
}
.specimen-intro {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 680px;
  margin: 0;
}
.specimen-rule {
  margin: 64px 0 56px;
  height: 1px;
  background: var(--line);
  border: none;
}
.specimen-section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 10px;
}
.specimen-section-label::before {
  content: "";
  width: 24px; height: 1px; background: var(--ink);
}

/* ── Responsive overrides ─────────────────────────────────────────────
 * The site pages are composed with inline styles, so these overrides use
 * !important + attribute selectors to collapse grids and reduce padding
 * at narrow viewports. Four breakpoints: wide-tablet (≤1074), tablet (≤960),
 * mobile (≤700), small (≤460). Later rules override earlier ones (cascade).
 * ────────────────────────────────────────────────────────────────── */

@media (max-width: 1074px) {
  /* Collapse 3-col grids to 2 cols at tablet width */
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 960px) {
  /* Collapse 4 / 5 column grids to 2 cols */
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Side-by-side splits → stack */
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.4fr 0.6fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
  }
  /* Hero headline */
  h1[style*="font-size: 88px"] { font-size: 64px !important; }
  h1[style*="font-size: 78px"] { font-size: 60px !important; }
  /* CTA / big quote */
  h3[style*="font-size: 64px"], h3[style*="font-size: 48px"] {
    font-size: 40px !important;
  }
  blockquote[style*="font-size: 44px"] { font-size: 32px !important; }
}

@media (max-width: 700px) {
  /* Collapse 3 column grids to 1 */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Header nav: allow nav to wrap */
  header nav { font-size: 12.5px !important; gap: 18px !important; flex-wrap: wrap !important; }
  /* Reduce section lateral from 56px → 28px on mobile.
     Uses element selector (not style substring) because React normalizes
     padding: 56px 56px → padding: 56px in the DOM, breaking substring selectors. */
  section {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  /* Address card grid in contato */
  [style*="grid-template-columns: 1fr 1.4fr"] { grid-template-columns: 1fr !important; }
  /* Type scale down further */
  h1[style*="font-size: 88px"], h1[style*="font-size: 78px"] { font-size: 46px !important; }
  h2[style*="font-size: 56px"] { font-size: 38px !important; }
  h3[style*="font-size: 64px"] { font-size: 42px !important; }
  h3[style*="font-size: 48px"] { font-size: 32px !important; }
  blockquote[style*="font-size: 44px"] { font-size: 26px !important; }
  /* Mission band serif */
  p[style*="font-size: 36px"] { font-size: 22px !important; }
  /* PIX heading number */
  [style*="font-size: 42px"] { font-size: 30px !important; }
  /* Transparência métricas: preserve small top gap */
  [style*="padding: 32px 56px 56px"] { padding-top: 32px !important; }
  /* Footer body: reduce top/bottom on mobile, keep 56px lateral */
  footer [style*="padding: 56px 94px 32px"] {
    padding: 40px 56px 32px !important;
  }
  /* Footer grid: stay at 2 cols on mobile (generic repeat(4,1fr) rule would collapse to 1) */
  footer [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Footer bottom bar: stack CNPJ + copyright */
  footer [style*="padding: 18px 56px"] {
    padding: 16px 20px !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
}

@media (max-width: 460px) {
  header nav { gap: 12px !important; }
  /* Specimen pages */
  .specimen { padding-left: 22px !important; padding-right: 22px !important; }
  .specimen-title { font-size: 56px !important; }
}

/* Images / SVG never overflow their containers */
img, svg { max-width: 100%; }

/* ── Scroll reveal ──────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* ── Photo modal animations ─────────────────────────────────────── */
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-scale-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ── Tablet drawer / overlay ─────────────────────────────────────── */
@keyframes drawer-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes overlay-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── WhatsApp FAB position + transition ─────────────────────────── */
.wa-fab {
  transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s,
              box-shadow 0.2s;
}
body.drawer-open .wa-fab {
  right: 328px !important;
}

/* ── WhatsApp FAB pulse ring ─────────────────────────────────────── */
@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: 0.6; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.wa-fab-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: wa-pulse 2.4s ease-out infinite;
  pointer-events: none;
}