@layer base {
  :root {
    --primary-color: #0c2a2aE6;
    --primary-alt: #15aab5E6;
    --secondary-color: #40002fE6;
    --secondary-alt: #cc0174E6;
    --tertiary-color: #720241e6;
    --tertiary-alt: #02b893E6;
    --button-color: #df0471E6;
    --button-alt: #110000E6;
    --nav-color: #0a2626E6;
    --nav-alt: #17dbd8E6;
    --transparent: #124141E6;
    --error: #ff3333E6;

    --border: 3px ridge;
    --border-radius: 6px;
    --border-radius-sm: 3px;
    --border-radius-lg: 10px;
    --border-radius-xl: 12px;

    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 6px;
    --spacing-lg: 8px;
    --spacing-xl: 10px;

    --font-primary: "Audiowide", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --font-mono: "Courier New", monospace;

    --font-size-xs: 0.5rem;
    --font-size-sm: 0.6rem;
    --font-size-md: 0.75rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.215rem;
    --font-size-2xl: 2rem;

    --blur-light: blur(8px);
    --blur-medium: blur(16px);
    --blur-heavy: blur(20px);

    --shadow-sm: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --shadow-lg: 0 20px 60px 0 rgba(0, 0, 0, 0.8);

    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    --z-background: 1;
    --z-interface: 10;
    --z-dropdowns: 100;
    --z-modals: 1000;
    --z-overlays: 10000;

    --page-bg: #050a0b;
    --surface: rgba(10, 15, 19, 0.95);
    --surface-strong: rgba(16, 35, 38, 0.96);
    --surface-soft: rgba(17, 22, 32, 0.85);
    --text-primary: #e7eff2;
    --text-muted: #94a3b8;
    --border-light: rgba(96, 165, 181, 0.24);

    /* ── Aliases — resolve previously undefined variables ───────────── */
    --primary:      var(--primary-alt);      /* audio-player, chat             */
    --surface-1:    var(--surface);          /* audio-player panel             */
    --border-muted: var(--border-light);     /* audio-player panel             */
    --bg-primary:   var(--page-bg);          /* profile-page body              */
    --bg-card:      var(--surface-strong);   /* profile-page cards + mentions  */
  }
}