/* askew.systems site tokens — aligned to the aegis.askew.systems family.
   Brand: white + neon pink + purple. Hype-free, evidence-rich.
   Pink roles: decoration & large display only; --pink-text for small type
   on light backgrounds (contrast, not preference). */

:root {
  --pink: #e3228c;
  --pink-text: #c2186f;
  --pink-bright: #ec4899;
  --purple: #5b21b6;
  --purple-bright: #8b5cf6;
  --ink: #111827;
  --muted: #4b5563;
  --soft: #f9fafb;
  --tint: #fdf2f8;
}

body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); }

.brand-pink { color: var(--pink); }
.brand-purple { color: var(--purple); }
.grad-text {
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grad-ui {
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);
  color: #fff;
}
.section--soft { background: var(--soft); }
.section--tint { background: var(--tint); }
.section--dark { background: var(--ink); color: #fff; }

.askew-rotate { transform: rotate(-2deg); transition: transform 0.3s ease; }
.askew-rotate:hover { transform: rotate(2deg); }

.card-num {
  font-weight: 900;
  color: var(--pink);
  opacity: .35;
  letter-spacing: -0.05em;
}