/* ==========================================================================
   Ziga Agency | Tokens da marca
   Cores, tipografia, espaço, chanfros e classes de base usadas em todo o site,
   no style guide (/marca/) e no design system (/design-system/).
   Fontes: Space Grotesk (títulos) e Inter (texto), hospedadas em /assets/fonts/.
   Tema claro é o padrão; data-theme="dark" em qualquer bloco liga o escuro.
   ========================================================================== */

/* ---------- Fontes (variáveis, subconjunto latin) ---------- */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
}

/* Fallbacks com métricas ajustadas ao Arial (calculadas dos arquivos), para o texto não pular quando a fonte chega. */
@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"); size-adjust: 108.8%; ascent-override: 90.5%; descent-override: 26.8%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 106.4%; ascent-override: 91.1%; descent-override: 22.7%; line-gap-override: 0%; }

/* ---------- Cores: tema claro (creme) ---------- */
:root,
[data-theme="light"] {
  --surface: #F2EDE4;
  --surface-raised: #FAF7F1;
  --line: #D9D1C3;
  --line-strong: #8A8377;
  --ink: #141414;
  --ink-muted: #5E5850;
  --coral: #FF5A36;
  --on-coral: #141414;
  --coral-ink: #B8321A;
  --coral-soft: #FBE3D9;
  --danger: #9B1C1C;
  color-scheme: light;
}

/* ---------- Cores: tema escuro (preto) ---------- */
[data-theme="dark"] {
  --surface: #141414;
  --surface-raised: #1E1D1B;
  --line: #2E2C29;
  --line-strong: #75706A;
  --ink: #F2EDE4;
  --ink-muted: #A39C90;
  --coral: #FF5A36;
  --on-coral: #141414;
  --coral-ink: #FF7A5C;
  --coral-soft: #3A1A12;
  --danger: #FF8A80;
  color-scheme: dark;
}

/* ---------- Tipografia, espaço, chanfros ---------- */
:root {
  --font-display: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
  --font-text: Inter, "Inter Fallback", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --chamfer-sm: 8px;
  --chamfer-md: 16px;
  --chamfer-lg: 32px;

  --container: 1200px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}
[data-theme] { background: var(--surface); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding-left: 1.2em; }
a { color: var(--coral-ink); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--coral-ink); outline-offset: 2px; }
::selection { background: var(--coral); color: var(--on-coral); }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* ---------- Escala tipográfica ---------- */
.display-xl, .display, .heading, .subheading, .eyebrow { font-family: var(--font-display); font-weight: 500; }
.display-xl { font-size: 72px; line-height: 72px; letter-spacing: -0.03em; }
.display    { font-size: 48px; line-height: 52px; letter-spacing: -0.02em; }
.heading    { font-size: 32px; line-height: 38px; letter-spacing: -0.01em; }
.subheading { font-size: 22px; line-height: 28px; }
.eyebrow    { font-size: 12px; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-ink); }
.body-lg { font-size: 18px; line-height: 28px; }
.body    { font-size: 16px; line-height: 26px; }
.small   { font-size: 14px; line-height: 20px; }
.muted   { color: var(--ink-muted); }
.measure { max-width: 68ch; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--space-12)); margin: 0 auto; padding: 0 var(--space-12); }
.section { padding: var(--space-24) 0; border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-6); margin-bottom: var(--space-12); }
.section-head .eyebrow { padding-top: 14px; }
.section-head > div { display: flex; flex-direction: column; gap: var(--space-4); }
.block { margin-top: var(--space-16); }
.block-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- Chanfros (canto inferior direito, 45°) ---------- */
.chamfer-sm { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%); }
.chamfer-md { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-md)), calc(100% - var(--chamfer-md)) 100%, 0 100%); }
.chamfer-lg { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-lg)), calc(100% - var(--chamfer-lg)) 100%, 0 100%); }

/* ---------- Grafismo: faixas na diagonal do Z ---------- */
.stripes {
  background:
    repeating-linear-gradient(-45deg, transparent 0 36px, var(--surface) 36px 46px),
    var(--coral);
}

/* ---------- Logo (definido uma vez no HTML e reaproveitado com <use>) ---------- */
/* Nome e AGENCY seguem a cor do texto; o Z usa --logo-mark.
   Versão completa (com AGENCY): mínimo 240px de largura. Compacta (sem AGENCY): mínimo 120px. */
.zg-logo { display: block; width: auto; color: var(--ink); --logo-mark: var(--coral); }
.zg-logo-mono { --logo-mark: currentColor; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .container { padding: 0 var(--space-4); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .display-xl { font-size: 44px; line-height: 46px; }
  .display { font-size: 34px; line-height: 38px; }
  .heading { font-size: 26px; line-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}