:root {
  --x-ink: #0b1220;
  --x-ink-2: #121a2b;
  --x-mist: #f6f7fb;
  --x-stone: #d9deea;

  --x-indigo: #2c2a7a;
  --x-sakura: #ff5b93;
  --x-matcha: #26b56a;
  --x-gold: #f6c453;

  --bg: var(--x-mist);
  --surface: #ffffff;
  --surface-2: #f2f4fa;

  --text: #101828;
  --muted: #5c677c;

  --border: rgba(16, 24, 40, 0.12);

  --primary: var(--x-indigo);
  --primary-2: #3d35b6;
  --accent: var(--x-sakura);
  --success: var(--x-matcha);
  --warn: var(--x-gold);

  --shadow: 0 14px 40px rgba(11, 18, 32, 0.12);
  --shadow-soft: 0 10px 26px rgba(11, 18, 32, 0.1);

  --radius-lg: 22px;
  --radius-md: 16px;

  --grad-hero:
    radial-gradient(
      900px 420px at 12% 10%,
      rgba(255, 91, 147, 0.2),
      rgba(255, 91, 147, 0) 60%
    ),
    radial-gradient(
      760px 420px at 82% 18%,
      rgba(38, 181, 106, 0.22),
      rgba(38, 181, 106, 0) 62%
    ),
    radial-gradient(
      820px 520px at 46% 62%,
      rgba(44, 42, 122, 0.18),
      rgba(44, 42, 122, 0) 66%
    );

  --grad-ribbon: linear-gradient(
    90deg,
    rgba(44, 42, 122, 0.12),
    rgba(255, 91, 147, 0.1),
    rgba(38, 181, 106, 0.1)
  );
  --grad-chip: linear-gradient(
    135deg,
    rgba(44, 42, 122, 0.14),
    rgba(255, 91, 147, 0.12)
  );
  --grad-wave: linear-gradient(
    90deg,
    rgba(44, 42, 122, 0.55),
    rgba(255, 91, 147, 0.55),
    rgba(38, 181, 106, 0.55)
  );
}

.letterspace {
  letter-spacing: 0.12em;
}