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

/* ── Self-hosted fonts (woff2 em assets/fonts/) ───────────────────────
 * Substituem o Google Fonts via <link>. Same-origin, font-display: swap,
 * subsets latin + latin-ext (cobrem PT-BR). DM Sans é variável (400–700).
 * ────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dmsans-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibmplexmono-400-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibmplexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibmplexmono-500-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibmplexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrumentserif-italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrumentserif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrumentserif-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrumentserif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* warm dark + white */
  --ink:         oklch(0.22 0.020 60);
  --ink-soft:    oklch(0.36 0.018 60);
  --ink-mute:    oklch(0.48 0.013 60);   /* darkened from 0.55 → clears WCAG 4.5:1 on white for the small mono labels */
  --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(70,45,12,0.07);
  transition: transform .15s, box-shadow .15s;
}
.system-nav:hover { box-shadow: 0 4px 14px rgba(70,45,12,0.13); 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 (≤1000), tablet (≤960),
 * mobile (≤700), small (≤460). Later rules override earlier ones (cascade).
 * ────────────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  /* 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%; }

/* ── Photo zoom — lightbox-clickable images ─────────────────────── */
img[style*="cursor: pointer"] {
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), filter 0.38s ease;
  clip-path: inset(0 round 10px);
  will-change: transform;
}
img[style*="cursor: pointer"]:hover {
  transform: scale(1.05);
  filter: brightness(1.04);
}

/* ── Button base — enables JS-driven hover lift & active press ───── */
button {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
button:active {
  transform: translateY(0) scale(0.96) !important;
  transition-duration: 0.06s !important;
}

/* ── Footer links — dim at rest, full opacity on hover ──────────── */
footer a {
  opacity: 0.72;
  transition: opacity 0.2s ease;
}
footer a:hover {
  opacity: 1;
}

/* ── Nav CTA shimmer — single sweep on hover only ───────────────── */
@keyframes btn-shimmer {
  0%   { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(350%)  skewX(-20deg); }
}
.btn-shimmer {
  position: relative !important;
  overflow: hidden !important;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 35%,
    rgba(255,255,255,0.38) 50%,
    rgba(255,255,255,0.18) 65%,
    transparent 100%);
  transform: translateX(-150%) skewX(-20deg);
  pointer-events: none;
}
.btn-shimmer:hover::after {
  animation: btn-shimmer 0.72s ease forwards;
}

/* ── 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;
}

/* ── Keyboard focus — visible warm ring for keyboard users only ──── */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--sol) 70%, var(--ink));
  outline-offset: 2px;
  border-radius: 4px;
}
/* Clickable photos: the focus ring follows the rounded photo corners */
img[style*="cursor: pointer"]:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--sol) 70%, var(--ink));
  outline-offset: 3px;
}