/* State of Kamassa Unified Theme Framework
   Purpose: global palette + glow/accent harmonization without layout changes.
*/

:root {
  /* Core palette */
  --wt-white: #f6f2ea;
  --wt-black: #090909;
  --wt-red: #c62828;
  --wt-red-strong: #e53935;
  --wt-gold: #d4a24c;
  --wt-gold-soft: #e1be7a;

  /* Bridge existing project vars (no layout rewrite needed) */
  --text: var(--wt-white);
  --background-color: #0f0b09;
  --bg: #0f0b09;
  --bgtrans: #0f0b09f2;
  --primary: var(--wt-red);
  --accent: var(--wt-gold);
  --secondary: #1a1d24;

  /* Opacity layers used all over legacy styles */
  --primary10: color-mix(in srgb, var(--wt-red) 10%, transparent);
  --primary20: color-mix(in srgb, var(--wt-red) 20%, transparent);
  --primary30: color-mix(in srgb, var(--wt-red) 30%, transparent);
  --primary40: color-mix(in srgb, var(--wt-red) 40%, transparent);
  --accent20: color-mix(in srgb, var(--wt-gold) 20%, transparent);
  --accent30: color-mix(in srgb, var(--wt-gold) 30%, transparent);
  --secondary20: color-mix(in srgb, #1a1d24 20%, transparent);
  --secondary30: color-mix(in srgb, #1a1d24 30%, transparent);
  --secondary40: color-mix(in srgb, #1a1d24 40%, transparent);

  /* Unified glow system */
  --glow-red-sm: 0 0 12px color-mix(in srgb, var(--wt-red) 35%, transparent);
  --glow-red-md: 0 0 24px color-mix(in srgb, var(--wt-red) 42%, transparent);
  --glow-gold-sm: 0 0 12px color-mix(in srgb, var(--wt-gold) 38%, transparent);
  --glow-gold-md: 0 0 24px color-mix(in srgb, var(--wt-gold) 45%, transparent);

  --linearPrimarySecondary: linear-gradient(135deg, var(--wt-red), #1a1d24);
  --linearPrimaryAccent: linear-gradient(135deg, var(--wt-red), var(--wt-gold));
  --linearSecondaryAccent: linear-gradient(135deg, #1a1d24, var(--wt-gold));
}

@font-face {
    font-family: 'ChineseRocksRG';
    src: url("../chineserocksrg.otf") format("opentype");
}

/* Global visual harmonization */
html,
body {
  background-color: var(--bg);
  color: var(--text);
}

/* Keep all buttons consistent */
.primary-button,
.btn,
button.primary,
a.primary,
.nav-button.discord-button {
  background: linear-gradient(135deg, var(--wt-red), var(--wt-red-strong)) !important;
  color: #fff !important;
  border-color: color-mix(in srgb, var(--wt-red) 72%, #000) !important;
  box-shadow: var(--glow-red-sm);
}

.primary-button:hover,
.btn:hover,
button.primary:hover,
a.primary:hover,
.nav-button.discord-button:hover {
  box-shadow: var(--glow-red-md) !important;
  filter: brightness(1.04);
}

.secondary-button,
.btn.soft,
button.secondary,
a.secondary {
  background: color-mix(in srgb, #1a1d24 76%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--wt-gold) 28%, #1a1d24) !important;
  color: var(--wt-white) !important;
}

/* Gold accents for key headings, badges, separators */
.badge,
.logo-vice,
h2.section-title,
.section h2 strong,
.nav-link:hover {
  color: var(--wt-gold) !important;
}

/* Unified panel/card glow language */
.card,
.panel,
.modal,
.stat-card,
.stream-card,
.roadmap-card {
  border-color: color-mix(in srgb, var(--wt-gold) 22%, #2a2d36) !important;
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px color-mix(in srgb, var(--wt-gold) 8%, transparent);
}

.card:hover,
.panel:hover,
.stat-card:hover,
.stream-card:hover,
.roadmap-card:hover {
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.34),
    var(--glow-gold-sm);
}

/* Links + focus visibility */
a:hover {
  color: var(--wt-gold-soft) !important;
}

/* Global hover kill-switch for legacy blue interactions */
a:hover,
button:hover,
[role='button']:hover,
.nav-link:hover,
.nav-button:hover,
.primary-button:hover,
.secondary-button:hover,
.small-btn:hover,
.play:hover {
  color: var(--wt-white) !important;
  border-color: color-mix(in srgb, var(--wt-gold) 45%, #222) !important;
  box-shadow: var(--glow-gold-sm) !important;
}

.nav-link:hover {
  background: color-mix(in srgb, var(--wt-red) 20%, transparent) !important;
}

.secondary-button:hover,
.small-btn:hover {
  background: color-mix(in srgb, var(--wt-gold) 18%, #1a1d24) !important;
}

/* Any class names commonly tied to blue utility styles */
[class*='blue']:hover,
[class*='discord']:hover {
  background: linear-gradient(135deg, var(--wt-red), var(--wt-red-strong)) !important;
  border-color: color-mix(in srgb, var(--wt-red) 72%, #000) !important;
  color: #fff !important;
}

:focus-visible {
  outline: 2px solid var(--wt-gold);
  outline-offset: 2px;
}

/* Hard override layer for legacy inline/component blues */
html,
body,
body * {
  --primary: var(--wt-red) !important;
  --accent: var(--wt-gold) !important;
}

/* Navbar specific */
.nav-container .discord-button,
.nav-container .secondary-nav-button.discord-button,
.discord-button {
  background: linear-gradient(135deg, var(--wt-red), var(--wt-red-strong)) !important;
  border-color: color-mix(in srgb, var(--wt-red) 72%, #000) !important;
  box-shadow: var(--glow-red-sm) !important;
}

.nav-container .primary-nav-button {
  background: linear-gradient(135deg, var(--wt-gold), #f0c27b) !important;
  color: #111 !important;
  border-color: color-mix(in srgb, var(--wt-gold) 65%, #000) !important;
  box-shadow: var(--glow-gold-sm) !important;
}

/* Home play/action buttons */
a[href^="RedM://connect"],
a[href^="redm://connect"],
.play,
.play-button,
a[class*='play'],
.hero .primary-button,
.hero-right a,
.hero-buttons .primary-button {
  background: linear-gradient(135deg, var(--wt-gold), #f0c27b) !important;
  color: #150f0f !important;
  border-color: color-mix(in srgb, var(--wt-gold) 60%, #000) !important;
  box-shadow: var(--glow-gold-md) !important;
}

.hero .secondary-button,
.hero .small-btn {
  border-color: color-mix(in srgb, var(--wt-gold) 35%, #222) !important;
}

/* Nuclear override for any remaining blue nav/button accents */
.nav-container .nav-button,
.nav-container .nav-button * {
  border-color: color-mix(in srgb, var(--wt-gold) 35%, #000) !important;
}

.nav-container .nav-button:not(.discord-button) {
  background: linear-gradient(135deg, var(--wt-gold), #f0c27b) !important;
  color: #15110f !important;
}

.nav-container .discord-button,
.nav-container .discord-button * {
  background: linear-gradient(135deg, var(--wt-red), var(--wt-red-strong)) !important;
  color: #fff !important;
}