/*
Theme Name: Music Box
Theme URI: https://example.com/themes/music-box
Author: Music Box Team
Author URI: https://example.com
Description: A modern WordPress theme designed specifically for the Music Box plugin. Features rounded design, fixed header, AJAX search, and seamless integration with songs, playlists, and profiles.
Version: 1.0.0
Text Domain: music-box
Domain Path: /languages
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: music, chords, playlists, custom-post-types, accessibility-ready, translation-ready
*/

/* FILE PURPOSE: Core stylesheet entry with CSS variables, typography, layout primitives, and base theme styles. */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;600;700&display=swap');

:root {
  --mb-theme-color: #39CCA8;
  --mb-theme-color-hover: #2DB896;
  --mb-theme-color-active: #26A685;
  --mb-theme-color-light: #E6F8F4;
  --mb-bg: #FAFAFA;
  --mb-panel: #FFFFFF;
  --mb-panel-2: #F5F5F5;
  --mb-panel-3: #EEEEEE;
  --mb-text: #1A1A1A;
  --mb-text-secondary: #4A4A4A;
  --mb-muted: #8A8A8A;
  --mb-secondary: #6A6A6A;
  --mb-border: #E0E0E0;
  --mb-border-light: #F0F0F0;
  --mb-border-dark: #D0D0D0;
  --mb-brand: #39CCA8;
  --mb-header-height: 64px;
  --mb-footer-height: 80px;
  --mb-radius: 8px;
  --mb-radius-sm: 6px;
  --mb-radius-lg: 12px;
  --mb-radius-xl: 16px;
  --mb-font-family: 'Roboto Mono', monospace;
  --mb-font-weight-normal: 400;
  --mb-font-weight-medium: 500;
  --mb-font-weight-semibold: 600;
  --mb-font-weight-bold: 700;
  --mb-container-max-width: 1280px;
  --mb-spacing-xs: 4px;
  --mb-spacing-sm: 8px;
  --mb-spacing-md: 16px;
  --mb-spacing-lg: 24px;
  --mb-spacing-xl: 32px;
  --mb-spacing-2xl: 48px;
  --mb-spacing-3xl: 64px;
  --mb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --mb-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --mb-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --mb-transition-fast: 150ms ease;
  --mb-transition-base: 200ms ease;
  --mb-transition-slow: 300ms ease;
}

html[data-theme="dark"] {
  --mb-bg: #0F0F0F;
  --mb-panel: #1A1A1A;
  --mb-panel-2: #242424;
  --mb-panel-3: #2E2E2E;
  --mb-text: #F5F5F5;
  --mb-text-secondary: #CCCCCC;
  --mb-muted: #999999;
  --mb-secondary: #AAAAAA;
  --mb-border: #333333;
  --mb-border-light: #2A2A2A;
  --mb-border-dark: #404040;
  --mb-brand: #39CCA8;
  --mb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --mb-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --mb-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--mb-font-family);
  font-size: 15px;
  font-weight: var(--mb-font-weight-normal);
  line-height: 1.7;
  color: var(--mb-text);
  background: var(--mb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

@media (max-width: 1024px) {
  body {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

* {
  box-sizing: border-box;
}

a {
  color: var(--mb-theme-color);
  text-decoration: none;
  transition: color var(--mb-transition-base);
  font-weight: var(--mb-font-weight-medium);
}

a:hover {
  color: var(--mb-theme-color-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mb-font-family);
  font-weight: var(--mb-font-weight-semibold);
  line-height: 1.4;
  margin: 0 0 var(--mb-spacing-md) 0;
  color: var(--mb-text);
  letter-spacing: -0.02em;
}

h1 { font-size: 2.25rem; font-weight: var(--mb-font-weight-bold); }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

@media (max-width: 1024px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.625rem; }
  h3 { font-size: 1.375rem; }
  h4 { font-size: 1.125rem; }
  h5 { font-size: 1rem; }
  h6 { font-size: 0.9375rem; }
}

@media (max-width: 767px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.125rem; }
  h5 { font-size: 1rem; }
  h6 { font-size: 0.9375rem; }
}

p {
  margin: 0 0 var(--mb-spacing-md) 0;
}

p:last-child {
  margin-bottom: 0;
}