/* macOS-inspired design tokens */
:root {
  /* Typography */
  --font-sans: -apple-system, "SF Pro Display", "SF Pro Text",
               BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Background layers */
  --bg-primary:       #1c1c1e;
  --bg-secondary:     #2c2c2e;
  --bg-tertiary:      #3a3a3c;
  --bg-elevated:      #2c2c2e;

  /* Glass surfaces */
  --surface-glass:    rgba(28, 28, 30, 0.72);
  --surface-card:     rgba(44, 44, 46, 0.85);
  --surface-sidebar:  rgba(20, 20, 22, 0.82);

  /* Blur */
  --blur-glass:   saturate(180%) blur(20px);
  --blur-sidebar: saturate(180%) blur(30px);

  /* Liquid glass (see liquid-glass.css) */
  --lg-blur: blur(28px) saturate(200%) brightness(1.08);
  --lg-tint: rgba(28, 28, 30, 0.45);
  --lg-tint-heavy: rgba(20, 20, 22, 0.58);
  --lg-sheen: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.035) 32%,
    rgba(255, 255, 255, 0.00) 55%,
    rgba(255, 255, 255, 0.05) 100%
  );
  --lg-rim:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.09);
  --lg-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);

  /* Accent — Jellyfin purple */
  --accent:         #aa5cc3;
  --accent-hover:   #bf6fd8;
  --accent-pressed: #8c44ab;
  --accent-subtle:  rgba(170, 92, 195, 0.18);
  --accent-glow:    rgba(170, 92, 195, 0.35);

  /* Text */
  --text-primary:   rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-tertiary:  rgba(255, 255, 255, 0.30);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glass:  rgba(255, 255, 255, 0.12);

  /* Border radii */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-card: 12px;
  --radius-full: 9999px;

  /* Spacing (4px base) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px;  --sp-5: 20px;  --sp-6: 24px;
  --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px;

  /* Sidebar */
  --sidebar-w: 220px;

  /* Shadows */
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-modal:  0 16px 64px rgba(0, 0, 0, 0.7);
  --shadow-subtle: 0 2px 8px  rgba(0, 0, 0, 0.3);

  /* Easing */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast:    150ms;
  --dur-normal:  250ms;
  --dur-slow:    400ms;
}