/* Shared theme tokens (light + dark): link on every page; page-specific tokens stay in each page's :root */

:root {
  /* Glass surfaces */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-2: rgba(255, 255, 255, 0.35);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-border-2: rgba(255, 255, 255, 0.35);
  --blur: blur(18px);
  --blur-sm: blur(10px);

  /* Text */
  --text-1: #1a1230;
  --text-2: #5c5272;
  --text-3: #9a90b8;

  /* Accents */
  --accent: #9a168b;
  --accent-2: #f08fe5;
  --accent-3: #F472B6;
  --accent-hover: #6D28D9;
  --accent-subtle: rgba(124, 58, 237, 0.12);

  --green: #10B981;
  --green-subtle: rgba(16, 185, 129, 0.12);
  --amber: #F59E0B;
  --red: #EF4444;

  /* Typography: Work Sans is self-hosted, declared in regular.min.css (link it alongside this file) */
  --f-display: 'Work Sans', sans-serif;
  --f-body: 'Work Sans', sans-serif;
  --f-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Shape & motion */
  --r: 10px;
  --r-sm: 7px;
  --tr: 0.18s ease;

  /* Scrollbar */
  --scrollbar-thumb: rgba(26, 18, 48, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root {
    --glass: rgba(20, 14, 40, 0.55);
    --glass-2: rgba(20, 14, 40, 0.35);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-2: rgba(255, 255, 255, 0.06);

    --text-1: #EDE9FF;
    --text-2: #B3AAD9;
    --text-3: #8C82B5;

    --accent: #f5b9ee;
    --accent-2: #d386ca;
    --accent-3: #F9A8D4;
    --accent-hover: #C4B5FD;
    --accent-subtle: rgba(167, 139, 250, 0.13);

    --green: #34D399;
    --green-subtle: rgba(52, 211, 153, 0.1);
    --amber: #FBBF24;
    --red: #F87171;

    --scrollbar-thumb: rgba(237, 233, 255, 0.16);
  }
}

/* ── Scrollbars ──────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* ── Animated Background ─────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, #ddd6fe 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 10%, #bae6fd 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 70% 85%, #fbcfe8 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 20% 80%, #a5f3fc 0%, transparent 50%),
    #ece9f5;
}

@media (prefers-color-scheme: dark) {
  body::before {
    background:
      radial-gradient(ellipse 70% 55% at 8% 18%, #3b0764 0%, transparent 55%),
      radial-gradient(ellipse 55% 45% at 88% 8%, #4a044e 0%, transparent 50%),
      radial-gradient(ellipse 65% 55% at 68% 88%, #500724 0%, transparent 50%),
      radial-gradient(ellipse 45% 35% at 22% 82%, #831843 0%, transparent 50%),
      #0a0410;
  }
}

/* Floating orbs */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle 300px at 15% 30%, rgba(124, 58, 237, 0.18) 0%, transparent 70%),
    radial-gradient(circle 220px at 80% 15%, rgba(6, 182, 212, 0.15) 0%, transparent 70%),
    radial-gradient(circle 260px at 75% 78%, rgba(244, 114, 182, 0.15) 0%, transparent 70%),
    radial-gradient(circle 200px at 35% 75%, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
  animation: orbs 18s ease-in-out infinite alternate;
}

@keyframes orbs {
  0% {
    filter: blur(0px);
  }

  50% {
    filter: blur(2px) saturate(1.3);
  }

  100% {
    filter: blur(0px);
  }
}

@media (prefers-color-scheme: dark) {
  body::after {
    background:
      radial-gradient(circle 300px at 15% 30%, rgba(124, 58, 237, 0.30) 0%, transparent 70%),
      radial-gradient(circle 220px at 80% 15%, rgba(232, 121, 249, 0.24) 0%, transparent 70%),
      radial-gradient(circle 260px at 75% 78%, rgba(244, 114, 182, 0.28) 0%, transparent 70%),
      radial-gradient(circle 200px at 35% 75%, rgba(251, 113, 133, 0.20) 0%, transparent 70%);
  }
}