/* ============================================================================
   GET RADIO AIRPLAY - DESIGN SYSTEM (Premium / Industry / Classy)
   ============================================================================

   NOTES ON THIS VERSION
   - Dark theme uses charcoal (not near-black) for a premium feel
   - Accent is a classy amber (less neon than bright orange)
   - Package/tier colours are softened (tints) so they don’t fight CTAs
   - Dark-mode text has proper “muted” values (not pure white)
   - Surface layers are tuned to create clearer elevation on dark backgrounds

   ============================================================================ */

/* ============================================================================
   SITE TYPEFACE — self-hosted (UK GDPR: no third-party data transfer)
   ----------------------------------------------------------------------------
   Plus Jakarta Sans is a variable font (one file per subset covers all weights).
   Material Symbols ships as a single icon font. Files live in /static/fonts/.
   ============================================================================ */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Gloria Hallelujah';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/gloria-hallelujah-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/patrick-hand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/material-symbols-outlined.woff') format('woff');
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga' 1, 'rlig' 1;
  -webkit-font-feature-settings: 'liga' 1, 'rlig' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:root {
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ============================================================================
   DEFAULT THEME (Light Blue)
   ============================================================================ */
:root {
  /* --- CORE PALETTE (Change these to transform the entire theme) --- */
  --color-brand-primary: #04a1ff;      /* Main brand color */
  --color-brand-secondary: #66B2FF;    /* Secondary brand color */
  --color-brand-dark: #072365;         /* Dark brand accent */
  --color-brand-darker: #00315E;       /* Darkest brand accent */

  /* --- ACCENT/CTA COLORS --- */
  --color-accent: #D97706;             /* Classy amber */
  --color-accent-hover: #B45309;       /* Hover */
  --color-accent-active: #92400E;      /* Active */

  /* --- BACKGROUNDS --- */
  --bg: var(--color-brand-primary);
  --bg-2: var(--color-brand-secondary);
  --bg-surface: #ffffff;               /* Card/form backgrounds */
  --bg-surface-alt: #f8fafc;           /* Alternate surface (forms, sections) */
  --bg-elevated: #ffffff;              /* Elevated elements (modals, dropdowns) */

  /* --- TEXT COLORS --- */
  --text-primary: #ffffff;             /* Primary text on dark backgrounds */
  --text-secondary: #072365;           /* Secondary text, labels */
  --text-muted: rgba(255,255,255,0.85);/* Muted/subtle text */
  --text-on-surface: #111827;          /* Text on light surfaces */
  --text-on-accent: #ffffff;           /* Text on accent-colored backgrounds */

  /* Legacy aliases (for backwards compatibility) */
  --text: var(--text-primary);
  --text-header: var(--text-primary);

  /* --- BORDERS --- */
  --border: #333333;
  --border-light: #e5e7eb;             /* Light borders for cards */
  --border-focus: var(--color-brand-dark);

  /* --- BUTTON COLORS --- */
  --btn-primary-bg: var(--color-accent);
  --btn-primary-text: var(--text-on-accent);
  --btn-primary-border: var(--color-brand-darker);
  --btn-primary-hover: var(--color-accent-hover);

  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: #374151;
  --btn-secondary-border: #d1d5db;
  --btn-secondary-hover: #f9fafb;

  --btn-danger-bg: #ef4444;
  --btn-danger-text: #ffffff;
  --btn-danger-border: #b91c1c;
  --btn-danger-hover: #dc2626;

  /* --- FORM COLORS --- */
  --input-bg: #ffffff;
  --input-text: #374151;
  --input-border: #d1d5db;
  --input-focus-ring: var(--color-accent);
  --input-error: #ef4444;
  --input-placeholder: #9ca3af;
  --label-text: var(--color-brand-dark);

  /* --- STATUS/FEEDBACK COLORS --- */
  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  --color-success-text: #166534;

  --color-warning: #d97706;
  --color-warning-light: #fffbeb;
  --color-warning-text: #92400e;

  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-error-text: #991b1b;

  --color-info: #2563eb;
  --color-info-light: #dbeafe;
  --color-info-text: #1e40af;

  /* --- PACKAGE/TIER COLORS (Song Cards) --- */
  /* Radio Ready Check */
  --package-basic-bg: #ffffff;
  --package-basic-border: #e5e7eb;
  --package-basic-badge-bg: #2563eb;
  --package-basic-badge-text: #ffffff;
  --package-basic-text: #0B2A5A;

  /* Song Upload Only */
  --package-standard-bg: #ffffff;
  --package-standard-border: #e5e7eb;
  --package-standard-badge-bg: #d4a017;
  --package-standard-badge-text: #111827;
  --package-standard-text: #111827;

  /* Upload + Airplay Report */
  --package-premium-bg: #ffffff;
  --package-premium-border: #e5e7eb;
  --package-premium-badge-bg: #14b8a6;
  --package-premium-badge-text: #ffffff;
  --package-premium-text: #111827;

  /* Pending songs */
  --package-pending-bg: #ffffff;
  --package-pending-border: var(--color-accent);
  --package-pending-ring: var(--color-accent);

  /* No package (fallback) */
  --package-none-bg: #ffffff;
  --package-none-border: #e5e7eb;

  /* --- SURFACE LAYERS (Progressive elevation) --- */
  --surface-0: #f8fafc;
  --surface-1: #f1f5f9;
  --surface-2: #e2e8f0;
  --surface-3: #f8fafc;
  --surface-4: #eef2f7;
  --surface-edit: #e2e8f0;   /* Inline edit-song form fill — always light across themes */

  /* --- LEGACY ALIASES (for backwards compatibility) --- */
  --primary-800: var(--color-brand-dark);
  --primary-900: var(--color-brand-darker);
  --primary-600: #2d82bb;
  --accent-600: var(--color-accent-hover);
}

/* ============================================================================
   RADIO THEME (Red/Black) - softened slightly for readability
   ============================================================================ */
:root[data-theme="radio"] {
  /* --- CORE PALETTE --- */
  --color-brand-primary: #111318;      /* charcoal instead of pure black */
  --color-brand-secondary: #C62828;    /* deeper red */
  --color-brand-dark: #C62828;
  --color-brand-darker: #0B2A5A;

  /* --- ACCENT --- */
  --color-accent: #D97706;             /* classy amber */
  --color-accent-hover: #B45309;
  --color-accent-active: #92400E;

  /* --- BACKGROUNDS --- */
  --bg: var(--color-brand-primary);
  --bg-2: var(--color-brand-secondary);
  --bg-surface: #ffffff;
  --bg-surface-alt: #f8fafc;
  --bg-elevated: #ffffff;

  /* --- TEXT --- */
  --text-primary: rgba(255,255,255,0.92);
  --text-secondary: rgba(255,255,255,0.82);
  --text-muted: rgba(255,255,255,0.74);
  --text-on-surface: #111827;
  --text-on-dark: rgba(255,255,255,0.92);
  --text-on-accent: #ffffff;

  --text: var(--text-primary);
  --text-header: var(--text-primary);

  /* --- BORDERS --- */
  --border: rgba(255,255,255,0.12);
  --border-light: #e5e7eb;
  --border-focus: var(--color-accent);

  /* --- LEGACY --- */
  --primary-800: var(--color-brand-dark);
  --primary-900: var(--color-brand-darker);
  --primary-600: #2d82bb;
  --accent-600: var(--color-accent-hover);
}

/* ============================================================================
   ROCK THEME (Premium / Industry / Classy) - CURRENT DEFAULT
   ============================================================================ */
:root[data-theme="rock"] {
  /* --- CORE PALETTE --- */
  --color-brand-primary: #121418;      /* Premium charcoal */
  --color-brand-secondary: #0A2272;    /* Cobalt blue matched to hero image */
  --color-brand-dark: #0B2A5A;
  --color-brand-darker: #071A3A;
  --color-brand-medium: #3B82F6;

  /* --- ACCENT/CTA COLORS --- */
  --color-accent: #D97706;
  --color-accent-hover: #B45309;
  --color-accent-active: #92400E;

  /* --- BACKGROUNDS --- */
  --bg: var(--color-brand-primary);
  --bg-2: var(--color-brand-secondary);
  --bg-surface: #ffffff;               /* ✅ profile card + cards */
  --bg-surface-alt: #f8fafc;           /* ✅ calmer neutral alt surface */
  --bg-elevated: #ffffff;

  /* --- TEXT --- */
  --text-primary: #0B2A5A;
  --text-secondary: #4b5563;
  --text-on-surface: #111827;
  --text-on-dark: rgba(255,255,255,0.92);
  --text-muted: rgba(255,255,255,0.74);
  --text-on-accent: #ffffff;

  --text-header: var(--text-on-dark);
  --text: var(--text-primary);

  /* --- BORDERS --- */
  --border: rgba(255,255,255,0.12);
  --border-light: #e5e7eb;
  --border-focus: var(--color-accent);

  /* --- BUTTONS --- */
  --btn-primary-bg: var(--color-accent);
  --btn-primary-text: var(--text-on-accent);
  --btn-primary-border: var(--color-brand-darker);
  --btn-primary-hover: var(--color-accent-hover);

  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: #374151;
  --btn-secondary-border: #d1d5db;
  --btn-secondary-hover: #f9fafb;

  --btn-danger-bg: #ef4444;
  --btn-danger-text: #ffffff;
  --btn-danger-border: #b91c1c;
  --btn-danger-hover: #dc2626;

  /* --- FORMS --- */
  --input-bg: #ffffff;
  --input-text: #374151;
  --input-border: #d1d5db;
  --input-focus-ring: var(--color-accent);
  --input-error: #ef4444;
  --input-placeholder: #9ca3af;
  --label-text: var(--color-brand-dark);

  /* --- STATUS --- */
  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  --color-success-text: #166534;

  --color-warning: #d97706;
  --color-warning-light: #fffbeb;
  --color-warning-text: #92400e;

  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-error-text: #991b1b;

  --color-info: #2563eb;
  --color-info-light: #dbeafe;
  --color-info-text: #1e40af;

  /* --- PACKAGE/TIER COLORS (✅ neutral cards; colour ONLY in badges) --- */
  --package-basic-bg: #ffffff;
  --package-standard-bg: #ffffff;
  --package-premium-bg: #ffffff;

  --package-basic-border: #e5e7eb;
  --package-standard-border: #e5e7eb;
  --package-premium-border: #e5e7eb;

  --package-basic-badge-bg: #2563eb;
  --package-standard-badge-bg: #d4a017;
  --package-premium-badge-bg: #14b8a6;

  --package-basic-badge-text: #ffffff;
  --package-standard-badge-text: #111827;
  --package-premium-badge-text: #ffffff;

  --package-basic-text: #111827;
  --package-standard-text: #111827;
  --package-premium-text: #111827;

  /* Pending songs */
  --package-pending-bg: #ffffff;
  --package-pending-border: var(--color-accent);
  --package-pending-ring: var(--color-accent);

  /* No package (fallback) */
  --package-none-bg: #ffffff;
  --package-none-border: #e5e7eb;

  /* --- SURFACE LAYERS --- */
  --surface-0: #121418;
  --surface-1: #181B21;
  --surface-2: #20242C;
  --surface-3: #f8fafc;
  --surface-4: #eef2f7;

  --highlight: #C62828;

  /* --- LEGACY --- */
  --primary-800: var(--color-brand-dark);
  --primary-900: var(--color-brand-darker);
  --primary-600: var(--color-brand-medium);
  --accent-600: var(--color-accent-hover);
  --accent-700: var(--color-accent-active);
  --accent-contrast: var(--text-on-accent);
}

/* ============================================================================
   FUTURE THEME SCAFFOLD
   ============================================================================
   Copy this template and modify the Core Palette values to create new themes:

   :root[data-theme="your-theme"] {
     --color-brand-primary: #...;
     --color-brand-secondary: #...;
     --color-brand-dark: #...;
     --color-brand-darker: #...;

     --color-accent: #...;
     --color-accent-hover: #...;
     --color-accent-active: #...;

     // ... rest of variables
   }
   ============================================================================ */