// TSMusicBot Design System — canonical tokens

:root {
  // Typography
  --font-primary: 'Barlow', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, 'Cascadia Code', monospace;

  --fs-hero:  22px;
  --fs-h1:    20px;
  --fs-h2:    17px;
  --fs-h3:    16px;
  --fs-body:  14px;
  --fs-sm:    13px;
  --fs-xs:    12px;
  --fs-2xs:   11px;
  --fs-micro: 10px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:  1.2;
  --lh-normal: 1.4;
  --lh-body:   1.5;

  // Spacing
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  36px;
  --space-10: 80px;

  // Layout
  --navbar-height: 56px;
  --player-height: 56px;
  --page-gutter: 10vw;

  // Radius
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  // Transitions
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --ease-cinematic: cubic-bezier(0.25, 0.1, 0.25, 1);

  // Shadows
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.35);

  // Accent
  --color-primary: #335eea;
  --color-primary-bg: #eaeffd;
  --color-primary-15: rgba(51, 94, 234, 0.15);
  --color-primary-10: rgba(51, 94, 234, 0.10);
  --color-primary-12: rgba(51, 94, 234, 0.12);
  --gradient-fm: linear-gradient(135deg, #335eea, #6366f1);

  // Semantic (theme-invariant)
  --color-online: #22c55e;
  --color-online-15: rgba(34, 197, 94, 0.15);
  --color-paused: #eab308;
  --color-paused-15: rgba(234, 179, 8, 0.15);

  // Platform brand
  --brand-netease: #e81123;
  --brand-netease-15: rgba(232, 17, 35, 0.15);
  --brand-qq: #12b76a;
  --brand-qq-15: rgba(18, 183, 106, 0.15);
  --brand-bilibili: #00a1d6;
  --brand-bilibili-15: rgba(0, 161, 214, 0.15);
  --brand-youtube: #ff0000;
  --brand-youtube-12: rgba(255, 0, 0, 0.12);
  --brand-kugou: #2ca2f9;
  --brand-kugou-12: rgba(44, 162, 249, 0.12);
  --brand-spotify: #1DB954;
  --brand-spotify-12: rgba(29, 185, 84, 0.12);
}

// Dark theme (default)
:root,
[data-theme='dark'] {
  --bg-primary: #222222;
  --bg-secondary: #323232;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-navbar: rgba(34, 34, 34, 0.86);
  --bg-modal-scrim: rgba(0, 0, 0, 0.55);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.58);
  --text-tertiary: rgba(255, 255, 255, 0.38);
  --border-color: rgba(255, 255, 255, 0.06);
  --hover-bg: rgba(255, 255, 255, 0.08);
}

[data-theme='light'] {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f7;
  --bg-card: rgba(0, 0, 0, 0.02);
  --bg-navbar: rgba(255, 255, 255, 0.86);
  --bg-modal-scrim: rgba(0, 0, 0, 0.35);
  --text-primary: #000000;
  --text-secondary: rgba(0, 0, 0, 0.58);
  --text-tertiary: rgba(0, 0, 0, 0.38);
  --border-color: rgba(0, 0, 0, 0.06);
  --hover-bg: rgba(0, 0, 0, 0.04);
}