:root {
      --aurora-left: #4a9bd6;
      --aurora-mid: #8f80d1;
      --aurora-right: #ae52a5;

      color-scheme: dark;
      --bg: #070b12;
      --panel: #0e141f;
      --panel-2: #121a29;
      --glass: rgba(18, 26, 41, .88);
      --glass-bd: rgba(160, 185, 230, .35);
      --txt: #ffffff;
      --muted: #e6dcff;
      --brand-1: #d6b3ff; /* lavender instead of blue */
      --brand-2: #b794f6;
      --brand-3: #ff6ec7;
      --ok: #3dd68c;
      --warn: #ffb86b;
      --err: #ff6b9d;
      --rad-sm: 14px;
      --rad-md: 22px;
      --rad-lg: 28px;
      --shadow: 0 20px 60px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
      --tr-fast: .2s cubic-bezier(.2, .8, .2, 1);
      --tr-med: .35s cubic-bezier(.2, .8, .2, 1);

    /* Skeleton background colors. Will be mapped via data-theme below */
    --skeleton-bg-dark: rgba(255, 255, 255, .08);
    --skeleton-bg-light: rgba(0, 0, 0, .08);
    }

/* Theme-specific skeleton variable mapping */
[data-theme="dark"] {
  --skeleton-bg: var(--skeleton-bg-dark);
}
[data-theme="light"] {
  --skeleton-bg: var(--skeleton-bg-light);
}

/* Light theme variables */
html[data-theme="light"] {
  --bg: #f6f8fc;
  --panel: #ffffff;
  --panel-2: #f2f5fa;
  --glass: rgba(255, 255, 255, 0.8);
  --glass-bd: rgba(0, 0, 0, 0.1);
  --txt: #1a1f2b;
  --muted: #4d5d72;
  --brand-1: #a788d8;
  --brand-2: #9c7ae9;
  --brand-3: #e15bbb;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  /* adjust button focus ring for light background */
}


/* ===== Premium visual polish tokens ===== */
:root {
  --surface-1: color-mix(in oklab, var(--panel) 88%, #ffffff 12%);
  --surface-2: color-mix(in oklab, var(--panel-2) 86%, #ffffff 14%);
  --surface-3: color-mix(in oklab, var(--panel) 74%, #000000 26%);
  --line-soft: color-mix(in oklab, var(--glass-bd) 58%, transparent);
  --line-strong: color-mix(in oklab, var(--glass-bd) 88%, rgba(255,255,255,.2));
  --text-soft: color-mix(in oklab, var(--muted) 72%, var(--txt) 28%);
  --text-quieter: color-mix(in oklab, var(--muted) 88%, transparent);
  --section-gap: clamp(58px, 8vw, 104px);
  --card-pad: clamp(20px, 2.6vw, 30px);
  --content-measure: 72ch;
  --content-measure-narrow: 62ch;
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, .26);
  --shadow-lift: 0 24px 64px rgba(0, 0, 0, .34);
  --shadow-line: 0 1px 0 rgba(255,255,255,.05) inset;
  --hero-accent: linear-gradient(135deg, color-mix(in oklab, var(--brand-1) 72%, transparent), color-mix(in oklab, var(--brand-3) 46%, transparent));
}

html[data-theme="light"] {
  --surface-1: #ffffff;
  --surface-2: #f5f7fb;
  --surface-3: #eef2f8;
  --line-soft: rgba(50, 66, 96, .12);
  --line-strong: rgba(50, 66, 96, .18);
  --text-soft: #4b5b72;
  --text-quieter: #69778d;
  --shadow-soft: 0 14px 34px rgba(25, 35, 52, .08);
  --shadow-lift: 0 22px 52px rgba(25, 35, 52, .12);
  --shadow-line: 0 1px 0 rgba(255,255,255,.72) inset;
}