/* Design tokens — reuse these for every new page and component. */
:root {
  /* colour */
  --c-bg: #07040d;
  --c-surface: #1a0e2a;
  --c-text: #efe4f6;
  --c-text-strong: #fbf4ff;
  --c-text-muted: #c2b0d6;
  --c-text-faint: #a993c0;
  --c-lilac: #e9d8f7;
  --c-orchid: #d9a6f2;
  --c-purple: #9b6cf0;
  --c-magenta: #e07ae8;
  --c-btn-from: #7347d6;
  --c-btn-to: #b14acb;
  --c-error: #ffa6e4;
  --c-line: rgba(200, 150, 250, 0.26);
  --grad-accent: linear-gradient(135deg, var(--c-purple), var(--c-magenta));

  /* type */
  --f-display: 'Cinzel', Georgia, serif;
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* motion */
  --ease-out: cubic-bezier(0.16, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.2, 1.6, 0.4, 1);

  /* shape */
  --r-pill: 999px;
  --r-card: 18px;
  --r-panel: 26px;
  --focus: 2px solid #f0c2ff;
}