/* L'Acqua Marina - Design Tokens
   Fonte unica de verdade para cores, tipografia e espacamento.
   Nao alterar sem atualizar SKILL.md. */

:root {
  /* Paleta travada */
  --la-gold: #b08d5b;
  --la-gold-light: #c9a870;
  --la-gold-deep: #8a6a3f;
  --la-bg: #f2f0ec;
  --la-bg-2: #e8e5de;
  --la-ink: #1a1a18;
  --la-ink-soft: #4a4740;
  --la-line: rgba(26, 26, 24, 0.14);

  /* Tipografia - regra Matheus: Acumin base, Playfair 600 enfase, Mono para dados */
  --la-font-base: 'Acumin Pro', 'Inter', system-ui, -apple-system, sans-serif;
  --la-font-display: 'Playfair Display', Georgia, serif;
  --la-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Pesos canonicos */
  --la-weight-base: 400;      /* Acumin regular */
  --la-weight-emphasis: 600;  /* Playfair semibold */

  /* Escala tipografica (1080x1080 canvas) */
  --la-size-display-xl: 180px;
  --la-size-display-l: 120px;
  --la-size-display: 96px;
  --la-size-h1: 72px;
  --la-size-h2: 56px;
  --la-size-h3: 44px;
  --la-size-body-l: 28px;
  --la-size-body: 22px;
  --la-size-caption: 18px;
  --la-size-meta: 14px;
  --la-size-micro: 11px;

  /* Tracking */
  --la-track-display: -0.02em;
  --la-track-tight: -0.015em;
  --la-track-mono: 0.22em;
  --la-track-meta: 0.18em;

  /* Espacamento (canvas 1080) */
  --la-margin: 80px;
  --la-margin-sm: 56px;
  --la-gap: 40px;
  --la-gap-sm: 24px;

  /* Line heights */
  --la-lh-display: 1;
  --la-lh-heading: 1.05;
  --la-lh-body: 1.5;
  --la-lh-meta: 1.3;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--la-bg);
  color: var(--la-ink);
  font-family: var(--la-font-base);
  font-weight: var(--la-weight-base);
  font-feature-settings: "kern", "liga", "ss01";
  -webkit-font-smoothing: antialiased;
}

/* Wordmark oficial */
.la-wordmark {
  font-family: var(--la-font-display);
  font-weight: 400;
  color: var(--la-ink);
}
.la-wordmark em {
  font-style: italic;
  color: var(--la-gold-deep);
}

/* Assinatura Squad Film */
.sf-signature {
  font-family: var(--la-font-display);
  font-weight: 400;
  font-style: italic;
  color: var(--la-ink);
}
.sf-signature b {
  font-family: var(--la-font-mono);
  font-weight: 500;
  font-style: normal;
  font-size: 0.7em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--la-gold-deep);
  margin-left: 0.5em;
}

/* Metadados em mono (labels, codigos, coordenadas) */
.la-meta {
  font-family: var(--la-font-mono);
  font-size: var(--la-size-meta);
  letter-spacing: var(--la-track-mono);
  text-transform: uppercase;
  color: var(--la-gold-deep);
}

/* Canvas sizes */
.canvas-1x1 { width: 1080px; height: 1080px; }
.canvas-4x5 { width: 1080px; height: 1350px; }
.canvas-9x16 { width: 1080px; height: 1920px; }

.canvas {
  position: relative;
  overflow: hidden;
  background: var(--la-bg);
  padding: var(--la-margin);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}