/* =============================================
   SavageShala Brand Theme
   Color palette from brand board + Kunaroh font
   ============================================= */

/* --- Custom Font: Kunaroh (display serif for headings) --- */
@font-face {
  font-family: 'Kunaroh';
  src: url('/fonts/Kunaroh.otf') format('opentype'),
       url('/fonts/Kunaroh.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Brand Palette (from brand board) --- */
:root {
  /* Backgrounds — soft cream / ivory / blush */
  --bg-primary: #FDF8F3;
  --bg-secondary: #F5EDE4;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFF9F5;
  --bg-section-alt: #FAF3EC;
  --bg-hero: linear-gradient(160deg, #FDF8F3 0%, #F9EDE5 40%, #FDF8F3 100%);

  /* Primary — coral / rose pink (CTAs, buttons, key accents) */
  --primary: #D4847B;
  --primary-hover: #C4746B;
  --primary-light: #EDAFA7;
  --primary-lighter: #F5D0CB;
  --primary-bg: rgba(212, 132, 123, 0.08);

  /* Secondary accents — navy / dark blue (sparingly) */
  --navy: #2C4F71;
  --navy-light: #3A6590;
  --navy-bg: rgba(44, 79, 113, 0.06);

  /* Periwinkle / light blue */
  --periwinkle: #B5C7DE;
  --periwinkle-light: #D4E0EE;

  /* Muted rose / nude — borders, subtle accents */
  --nude: #D4B5A6;
  --nude-light: #E8D5C9;
  --nude-lighter: #F0E3DA;

  /* Lavender gray */
  --lavender: #D0CDD6;
  --lavender-light: #E5E3EA;

  /* Text colors */
  --text-primary: #2D2926;
  --text-secondary: #6B5E58;
  --text-muted: #9E9488;
  --text-on-primary: #FFFFFF;
  --text-on-dark: #F5EDE4;

  /* Utility */
  --white: #FFFFFF;
  --cream: #FDF8F3;
  --border: rgba(212, 181, 166, 0.3);
  --border-hover: rgba(212, 132, 123, 0.4);
  --shadow-sm: 0 1px 3px rgba(45, 41, 38, 0.06);
  --shadow-md: 0 4px 12px rgba(45, 41, 38, 0.08);
  --shadow-lg: 0 8px 30px rgba(45, 41, 38, 0.10);
  --shadow-card: 0 2px 8px rgba(45, 41, 38, 0.05);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  /* Glass effect (for light backgrounds) */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(212, 181, 166, 0.2);
  --glass-border-hover: rgba(212, 132, 123, 0.3);

  /* Status */
  --success: #6B9E7B;
  --error: #D4647B;
  --warning: #D4A44B;
  --info: #5B8DB8;
  --red: #D4647B;

  /* Live badge */
  --live-red: #D4647B;

  /* Player */
  --player-height: 80px;

  /* Typography */
  --font-display: 'Kunaroh', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;
}

/* --- Base typography --- */
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .section-label, .hero-title, .page-title {
  font-family: var(--font-display);
  color: var(--text-primary);
}

/* --- Button resets --- */
.cta-primary, .nav-btn-primary, button[type="submit"], .btn-primary {
  background: var(--primary) !important;
  color: var(--text-on-primary) !important;
  border: none !important;
  transition: all 0.25s ease;
}

.cta-primary:hover, .nav-btn-primary:hover, button[type="submit"]:hover, .btn-primary:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.cta-secondary, .nav-btn, .btn-secondary {
  background: transparent !important;
  color: var(--primary) !important;
  border: 1.5px solid var(--primary) !important;
  transition: all 0.25s ease;
}

.cta-secondary:hover, .nav-btn:hover, .btn-secondary:hover {
  background: var(--primary-bg) !important;
  border-color: var(--primary-hover) !important;
}

/* --- Scrollbar styling --- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: var(--nude);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-light);
}

/* --- Selection styling --- */
::selection {
  background: var(--primary-lighter);
  color: var(--text-primary);
}