/**
 * ═══════════════════════════════════════════════════════════════
 * VEAM MUSIC - DESIGN SYSTEM
 * ═══════════════════════════════════════════════════════════════
 *
 * Extracted directly from Flutter app (theme.dart)
 * Colors, typography, spacing, and design tokens
 */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  /* ═══════════════════════════════════════════════════════════════
     COLORS (Exact match from Flutter VeamTheme)
     ═══════════════════════════════════════════════════════════════ */

  /* Backgrounds */
  --bg-primary: #121212;
  --bg-secondary: #181818;
  --bg-tertiary: #242424;

  /* Surfaces */
  --surface-primary: #2A2A2A;
  --surface-secondary: #333333;

  /* Accent Colors */
  --primary: #1DB954;           /* Spotify Green / VEAM Active */
  --primary-light: #1ED760;
  --primary-dark: #158F40;
  --cyan-accent: #00F5FF;

  /* Text Colors */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.7);   /* 70% opacity */
  --text-tertiary: rgba(255, 255, 255, 0.4);    /* 40% opacity */

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.1);     /* 10% opacity */
  --border-subtle: rgba(255, 255, 255, 0.05);   /* 5% opacity */

  /* ═══════════════════════════════════════════════════════════════
     TYPOGRAPHY (Exact match from Flutter VeamTheme)
     ═══════════════════════════════════════════════════════════════ */

  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Orbitron', 'Inter', sans-serif;

  /* Font Sizes */
  --text-display-large: 32px;      /* displayLarge - Orbitron, 900 weight */
  --text-display-medium: 24px;     /* displayMedium - Inter, 700 weight */
  --text-body-large: 16px;         /* bodyLarge - Inter, 400 weight */
  --text-body-medium: 14px;        /* bodyMedium - Inter, 400 weight */
  --text-label-large: 12px;        /* labelLarge - Inter, 600 weight */
  --text-label-small: 10px;        /* labelSmall - Inter, 600 weight */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ═══════════════════════════════════════════════════════════════
     SPACING (4px base unit)
     ═══════════════════════════════════════════════════════════════ */

  --spacing-xs: 4px;      /* 4px */
  --spacing-sm: 8px;      /* 8px */
  --spacing-md: 12px;     /* 12px */
  --spacing-lg: 16px;     /* 16px */
  --spacing-xl: 24px;     /* 24px */
  --spacing-2xl: 32px;    /* 32px */
  --spacing-3xl: 48px;    /* 48px */

  /* ═══════════════════════════════════════════════════════════════
     COMPONENT MEASUREMENTS (From Flutter widgets)
     ═══════════════════════════════════════════════════════════════ */

  /* App Bar */
  --appbar-height: 64px;

  /* Mini Player (Exact match from MiniPlayer widget) */
  --mini-player-height: 64px;
  --mini-player-cover-size: 44px;
  --mini-player-cover-radius: 4px;
  --mini-player-progress-height: 2px;

  /* Bottom Navigation */
  --bottom-nav-height: 64px;
  --bottom-nav-icon-size: 24px;
  --bottom-nav-label-size: 10px;

  /* Now Playing Screen */
  --vinyl-cover-size: 260px;
  --vinyl-border-width: 2px;
  --vinyl-center-size: 40px;

  /* Song Card */
  --song-card-padding: 16px;
  --song-card-play-btn-size: 48px;

  /* ═══════════════════════════════════════════════════════════════
     BORDER RADIUS
     ═══════════════════════════════════════════════════════════════ */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 30px;
  --radius-circle: 50%;

  /* ═══════════════════════════════════════════════════════════════
     SHADOWS
     ═══════════════════════════════════════════════════════════════ */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);

  /* ═══════════════════════════════════════════════════════════════
     Z-INDEX LAYERS
     ═══════════════════════════════════════════════════════════════ */

  --z-base: 1;
  --z-nav: 50;
  --z-mini-player: 90;
  --z-appbar: 100;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-splash: 9999;

  /* ═══════════════════════════════════════════════════════════════
     TRANSITIONS & ANIMATIONS
     ═══════════════════════════════════════════════════════════════ */

  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-spring: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Timing Functions */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */

/* Text Styles */
.text-display-large {
  font-family: var(--font-display);
  font-size: var(--text-display-large);
  font-weight: var(--font-weight-black);
  letter-spacing: 2px;
  color: var(--text-primary);
}

.text-display-medium {
  font-family: var(--font-primary);
  font-size: var(--text-display-medium);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.text-body-large {
  font-family: var(--font-primary);
  font-size: var(--text-body-large);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
}

.text-body-medium {
  font-family: var(--font-primary);
  font-size: var(--text-body-medium);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
}

.text-label-large {
  font-family: var(--font-primary);
  font-size: var(--text-label-large);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.text-label-small {
  font-family: var(--font-primary);
  font-size: var(--text-label-small);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
}

/* Color Utilities */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-accent { color: var(--primary) !important; }

.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-surface { background-color: var(--surface-primary) !important; }
.bg-accent { background-color: var(--primary) !important; }

/* Spacing Utilities */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* Layout Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Truncate Text */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide/Show */
.hidden { display: none !important; }
.visible { display: block !important; }