/**
 * M16 Theme Sample 5 - Platinum Zinc
 * Neutral / Minimal Luxury
 * File: assets/css/themes/sample-05.css
 */
:root {
  /* -- Core -- */
  --bg: #09090b;
  --surface: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.1);
  --text: #fafafa;
  --muted: #71717a;
  --accent: #a1a1aa;
  --accent-2: #d4d4d8;
  --glow: rgba(212, 212, 216, 0.22);
  --radius: 14px;

  /* -- Typography pair -- */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --font: var(--font-body);

  /* -- Semantic -- */
  --color-success: #d4d4d8;
  --color-success-bg: rgba(255, 255, 255, 0.08);
  --color-error: #fca5a5;
  --color-error-bg: rgba(252, 165, 165, 0.1);
  --color-warning: #fde68a;
  --color-warning-bg: rgba(253, 230, 138, 0.1);
  --color-info: #e4e4e7;
  --color-info-bg: rgba(228, 228, 231, 0.08);
  --color-wa: #4ade80;

  /* Accent surfaces (mono zinc — replaces mint/purple tints in auth.css) */
  --surface-accent: rgba(255, 255, 255, 0.06);
  --surface-accent-strong: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(255, 255, 255, 0.14);
  --border-accent-strong: rgba(255, 255, 255, 0.2);
}

.overlay {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(161, 161, 170, 0.05), transparent 50%),
    linear-gradient(180deg, transparent 0%, rgba(9, 9, 11, 0.5) 100%);
}

/* -- Platinum Zinc chrome (override hardcoded mint/purple in style.css) -- */
.navbar::before {
  background: linear-gradient(180deg, rgba(9, 9, 11, 0.82) 0%, transparent 100%);
}

.nav-inner {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(90deg, rgba(24, 24, 27, 0.92), rgba(9, 9, 11, 0.88));
}

.nav-mark {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #09090b;
}

.logo,
.hero h1,
.dash-page-title,
.dash-card__title {
  font-family: var(--font-display);
}

.nav-link:hover,
.nav-link.active {
  background: rgba(255, 255, 255, 0.08);
}

.btn-nav--ghost:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.btn-nav--accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%) !important;
  color: #09090b !important;
}

.stats--reports .stat-card--report:nth-child(1) .value,
.stats--reports .stat-card--report:nth-child(2) .value,
.stats--reports .stat-card--report:nth-child(3) .value,
.stats--reports .stat-card--report:nth-child(4) .value {
  color: var(--accent-2);
}

.leaderboard-row:hover,
.product-card:hover,
.stat-card--featured:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.home-bento__leaderboard .leaderboard-row--rank-1 {
  border-color: rgba(255, 215, 0, 0.28);
}

.cookie-live__row--robux strong,
.cookie-live__row--rap strong,
.cookie-special__row--deathwalker strong,
.cookie-special__row--deathspeaker strong {
  color: var(--accent-2);
}

.status-completed,
.status-success,
.status-active {
  color: var(--color-success) !important;
  background: var(--color-success-bg) !important;
}

.status-pending,
.status-warning,
.status-banned,
.status-badge.status-pending {
  color: var(--color-warning) !important;
  background: var(--color-warning-bg) !important;
}

.status-expired,
.status-invalid,
.status-failed,
.status-cancelled {
  color: var(--color-error) !important;
  background: var(--color-error-bg) !important;
}

.dash-nav-item--wa,
.dash-nav-item--wa:hover {
  color: var(--color-wa) !important;
}

.alert-success {
  color: var(--color-success) !important;
  background: var(--color-success-bg) !important;
  border-color: var(--border-accent) !important;
}

.alert-error {
  color: var(--color-error) !important;
  background: var(--color-error-bg) !important;
  border-color: color-mix(in srgb, var(--color-error) 35%, transparent) !important;
}

.report-brand,
.report-brand-sm,
.report-section-title {
  font-family: var(--font-display);
}

.report-hero-badge {
  border-color: var(--border-accent);
  background: var(--surface-accent-strong);
}

.report-link-banner {
  border-color: var(--border-accent);
  background: var(--surface-accent);
}

.text-red {
  color: var(--color-error) !important;
}

/* Typography: Display = Sora / Body = Manrope */
/* bg3d.js suggested: 0xa1a1aa, 0x71717a, 0xd4d4d8 */