/* ── Tokens ──────────────────────────────────────────────────────── */
    :root {
      --purple-900: #2E1065;
      --purple-800: #4C1D95;
      --purple-700: #5B21B6;
      --purple-600: #6D28D9;
      --purple-500: #7C3AED;
      --purple-400: #9F67FF;
      --purple-300: #C4B5FD;
      --purple-200: #DDD6FE;
      --purple-100: #EDE9FE;
      --purple-50:  #F5F3FF;
      --ink-900: #0F0A1A;
      --ink-800: #1F1830;
      --ink-700: #3B3349;
      --ink-600: #5B5268;
      --ink-500: #7A7289;
      --ink-400: #A9A2B5;
      --ink-300: #D6D1DE;
      --ink-200: #E9E5ED;
      --ink-100: #F3F0F6;
      --sfont: Inter600, sans-serif;
      --ffont: Inter500, sans-serif;
    }

    /* ── Accessibility ───────────────────────────────────────────────── */
    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible {
      outline: 2px solid var(--purple-600);
      outline-offset: 3px;
      border-radius: 4px;
    }
    .on-dark a:focus-visible,
    .on-dark button:focus-visible {
      outline-color: var(--purple-200);
    }
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ── Animations ──────────────────────────────────────────────────── */
    @keyframes ctf-pulse {
      0%, 100% {
        opacity: 1;
        transform: scale(1);
      }
      50% {
        opacity: 0.5;
        transform: scale(0.7);
      }
    }