/* ══════════════════════════════════════════════════════════════
   tokens.css — Design Tokens (Isabela Ferrarezi Arquitetura)
   Canonical source for all colour, typography, spacing,
   motion, and layout variables used across the site.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Colour Palette (OKLCH) ─────────────────────────────── */
  --bg:       oklch(95.2% 0.009 67.7); /* Linho de pedra #F3EEE9 */
  --surface:  oklch(99.3% 0.003 39.5); /* Argila 10 #FFFCFB */
  --fg:       oklch(25.1% 0.005 17.5); /* Grafite profundo #242121 */
  --muted:    oklch(53.9% 0.090 43.2); /* Cobre funcional #9A5C42 */
  --border:   oklch(84.0% 0.024 56.9); /* Areia mineral #D7C7BC */
  --accent:   oklch(29.6% 0.046 20.2);
  --wine:     oklch(49.5% 0.150 23.0);
  --success:  oklch(54% 0.110 145);
  --warn:     oklch(68% 0.130 75);
  --ink-deep: oklch(8% 0.003 20);     /* near-black for hero-media bg */

  /* Extended brand palette */
  --argila:   oklch(72.7% 0.059 40.5);
  --bronze:   oklch(63.7% 0.088 48.7);
  --linho:    oklch(95.2% 0.009 67.7);
  --grafite:  oklch(25.1% 0.005 17.5);

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: "Aktiv Grotesk", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Aktiv Grotesk", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "SFMono-Regular", ui-monospace, Menlo, monospace;
  --paragraph-weight: 300;
  --paragraph-tracking: 0.005em;

  /* ── Typography Scale (Golden Contrast) ─────────────────── */
  --text-hero:    clamp(3.0rem, 6.5vw, 6rem);
  --text-xl:      clamp(2.4rem, 5.0vw, 5.6rem);
  --text-lg:      clamp(1.8rem, 3.5vw, 4.0rem);
  --text-md:      clamp(1.4rem, 2.2vw, 2.4rem);
  --text-sm:      clamp(1.1rem, 1.4vw, 1.4rem);
  --text-body:    clamp(0.95rem, 1.15vw, 1.15rem);
  --text-caption: 0.85rem;
  --text-label:   0.72rem;
  --text-micro:   0.62rem;

  /* ── Layout & Golden Spacing ────────────────────────────── */
  --page-x:       clamp(20px, 5vw, 80px);
  --section-y:    clamp(80px, 12vw, 160px);
  --space-base:   1rem;
  --space-golden: calc(var(--space-base) * 1.618);
  --space-golden-2x: calc(var(--space-base) * 1.618 * 1.618);
  --space-golden-3x: calc(var(--space-base) * 1.618 * 1.618 * 1.618);
  
  --radius:       0;
  --line:         1px solid var(--border);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-golden:    cubic-bezier(0.25, 1, 0.38, 1); /* New premium easing */
  --motion-fast:    180ms;
  --motion-base:    520ms;
  --motion-slow:    1100ms;
}

/* ── Page-specific token overrides ─────────────────────────── */

/* Contato page — specific muted tone */
.page-contato {
  --muted: oklch(48% 0.010 42);
}

/* ── Small-screen type tightening ──────────────────────────── */
@media (max-width: 430px) {
  :root {
    --page-x:    16px;
    --text-hero: clamp(2.0rem, 10vw, 2.8rem);
    --text-xl:   clamp(1.7rem, 8.5vw, 2.4rem);
    --text-lg:   clamp(1.45rem, 7.5vw, 2.0rem);
    --text-md:   clamp(1.2rem, 6vw, 1.7rem);
    --text-sm:   clamp(1.0rem, 5vw, 1.2rem);
  }
}