/* Pixai Design: shared brand styles. Needs the Poppins font installed locally (or via Google Fonts). */
:root {
  --paper: #fbf7f0;
  --ink: #1b1a22;
  --muted: #6b6878;
  --orange: #ff7a45;
  --pink: #ff5c8a;
  --yellow: #ffc233;
  --violet: #7c5cff;
  --teal: #2ec4b6;

  --font: "Poppins", "Segoe UI", Arial, sans-serif;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pop-ms: 300ms;
  --stagger-ms: 50ms;
  --radius-card: 20px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.6;
}

h1, h2, h3, .wordmark {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* --orange-text is a slightly deeper orange so large text on paper meets contrast guidelines */
:root { --orange-text: #e04e17; }
.wordmark em, .accent { color: var(--orange-text); font-style: normal; }
.muted { color: var(--muted); }

.btn {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  background: var(--orange);
  color: var(--ink);
}

.card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 22px;
  box-shadow: 0 1px 0 rgba(27, 26, 34, .06);
}

/* Pixel pop-in animation: add class "pixel" to each square, set --i to its index (0, 1, 2...) */
@keyframes pixel-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.pixel {
  animation: pixel-pop var(--pop-ms) var(--ease-pop) both;
  animation-delay: calc(var(--i, 0) * var(--stagger-ms));
}
@media (prefers-reduced-motion: reduce) {
  .pixel { animation: none; }
}