/* ═══════════════════════════════════════════════════════════════════
   Styles (entry point) — Ilê Asé Agbára Ty Oyá
   REPAIR_LOCAL: removida duplicação de variáveis (agora em tokens.css)
   Agente: design-systems-producer (sol)
   Modelo: claude-opus-5 | tier: sol | contextClass: standard
   ═══════════════════════════════════════════════════════════════════ */

@import "./foundations.css";
@import "./components.css";
@import "./motion.css";

/* ── Backgrounds compostos (body) ── */

body {
  background:
    linear-gradient(
      90deg,
      rgba(200, 205, 209, .34) 1px,
      transparent 1px
    ) 0 0 / calc((100vw - 80px) / 12) 100%,
    radial-gradient(circle at 9% 3%, rgba(255, 255, 255, .98), transparent 26rem),
    radial-gradient(circle at 92% 9%, rgba(200, 205, 209, .24), transparent 32rem),
    linear-gradient(135deg, var(--color-page), var(--color-cloth) 58%, var(--color-pearl));
}

/* ── Dark mode backgrounds ── */

html[data-theme="dark"] body {
  background:
    linear-gradient(
      90deg,
      rgba(200, 205, 209, .12) 1px,
      transparent 1px
    ) 0 0 / calc((100vw - 80px) / 12) 100%,
    radial-gradient(circle at 9% 3%, rgba(200, 205, 209, .14), transparent 26rem),
    radial-gradient(circle at 92% 9%, rgba(231, 217, 184, .08), transparent 32rem),
    linear-gradient(135deg, var(--color-page), var(--color-cloth) 58%, var(--color-lace));
}

/* ── Breakpoint mobile: simplificar background ── */

@media (max-width: 520px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(200, 205, 209, .26), transparent 20rem),
      linear-gradient(180deg, var(--color-page), var(--color-cloth));
  }
}