/* BragBoard.gg Style Guide Implementation */

/* Import Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* CSS Custom Properties - BragBoard Brand Colors */
:root {
  /* BragBoard.gg Brand Colors */
  --bragboard-gold: #FFD700;
  --bragboard-blue: #00AEEF;
  --bragboard-charcoal: hsl(0, 0%, 10.2%);
  
  /* Dark Theme System */
  --background: hsl(0, 0%, 10.2%);
  --foreground: hsl(0 0% 100%);
  --card: hsl(0 0% 12%);
  --card-foreground: hsl(0 0 100%);
  --border: hsl(0 0% 20%);
  --muted: hsl(0 0% 96.1%);
  --muted-foreground: hsl(0 0% 45.1%);
  --destructive: hsl(0 84.2% 60.2%);
  
  /* Platform Colors */
  --steam-color: #1b2838;
  --xbox-color: #107c10;
  --playstation-color: #003087;
  
  /* Achievement Rarity Colors */
  --common: #6b7280;
  --uncommon: #10b981;
  --rare: #3b82f6;
  --epic: #8b5cf6;
  --legendary: #f59e0b;
}

/* Base Typography */
html {
  font-size: 14px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* BragBoard Dark Theme Body */
body {
  background: linear-gradient(135deg, var(--bragboard-charcoal), hsl(0, 0%, 8%), hsl(0, 0%, 12%));
  color: var(--foreground);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* BragBoard Brand Colors */
.text-bragboard-gold { color: var(--bragboard-gold); }
.text-bragboard-blue { color: var(--bragboard-blue); }
.text-bragboard-charcoal { color: var(--bragboard-charcoal); }

.bg-bragboard-gold { background-color: var(--bragboard-gold); }
.bg-bragboard-blue { background-color: var(--bragboard-blue); }
.bg-bragboard-charcoal { background-color: var(--bragboard-charcoal); }

.border-bragboard-gold { border-color: var(--bragboard-gold); }
.border-bragboard-blue { border-color: var(--bragboard-blue); }

/* BragBoard Cards */
.bragboard-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--card-foreground);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transition: all 300ms ease-in-out;
}

.bragboard-card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* BragBoard Buttons */
.btn-bragboard-primary {
  background-color: var(--bragboard-gold);
  color: var(--bragboard-charcoal);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 200ms ease-in-out;
}

.btn-bragboard-primary:hover {
  background-color: rgba(255, 215, 0, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.btn-bragboard-secondary {
  background-color: transparent;
  color: var(--bragboard-blue);
  border: 2px solid var(--bragboard-blue);
  border-radius: 8px;
  font-weight: 600;
  transition: all 200ms ease-in-out;
}

.btn-bragboard-secondary:hover {
  background-color: var(--bragboard-blue);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 174, 239, 0.3);
}

/* BragBoard Navigation */
.bragboard-navbar {
  background: rgba(26, 26, 26, 0.8) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.bragboard-navbar .navbar-brand {
  color: var(--foreground) !important;
  font-weight: 700;
  font-size: 1.25rem;
}

.bragboard-navbar .navbar-nav .nav-link {
  color: var(--muted-foreground) !important;
  font-weight: 500;
  transition: color 200ms ease-in-out;
}

.bragboard-navbar .navbar-nav .nav-link:hover {
  color: var(--bragboard-gold) !important;
}

/* BragBoard Forms */
.bragboard-form-control {
  background-color: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: 8px;
  transition: all 200ms ease-in-out;
}

.bragboard-form-control:focus {
  border-color: var(--bragboard-gold);
  box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
  background-color: var(--card);
  color: var(--foreground);
}

.bragboard-form-control::placeholder {
  color: var(--muted-foreground);
}

/* BragBoard Text Gradients */
.text-gradient-gold {
  background: linear-gradient(135deg, var(--bragboard-gold), #FFA500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-blue {
  background: linear-gradient(135deg, var(--bragboard-blue), #0080FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* BragBoard Hero Section */
.bragboard-hero {
  background: linear-gradient(to bottom right, rgba(0, 174, 239, 0.1), transparent, rgba(255, 215, 0, 0.1));
  padding: 4rem 0;
}

/* BragBoard Footer */
.footer {
  margin-top: auto;
  width: 100%;
  padding: 1rem 0;
  background-color: var(--card);
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
}

/* Focus States */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bragboard-gold), 0 0 0 0.25rem rgba(255, 215, 0, 0.25);
}

/* Responsive Typography */
@media (min-width: 640px) {
  .bragboard-hero h1 {
    font-size: 3rem;
  }
}

@media (min-width: 768px) {
  .bragboard-hero h1 {
    font-size: 4rem;
  }
}

@media (min-width: 1024px) {
  .bragboard-hero h1 {
    font-size: 5rem;
  }
}

/* Utility Classes */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.backdrop-blur-header {
  backdrop-filter: blur(10px);
  background: rgba(26, 26, 26, 0.8);
}

/* BragBoard Dropdown Styling */
.dropdown-menu {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dropdown-item {
  color: var(--foreground);
  transition: all 200ms ease-in-out;
}

.dropdown-item:hover {
  background-color: var(--bragboard-gold);
  color: var(--bragboard-charcoal);
}

.dropdown-item.text-danger:hover {
  background-color: var(--destructive);
  color: white;
}

/* BragBoard Alert Styling */
.alert-info {
  background-color: rgba(0, 174, 239, 0.1);
  border: 1px solid rgba(0, 174, 239, 0.2);
  color: var(--bragboard-blue);
}

/* BragBoard Form Styling */
.form-control {
  background-color: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: 8px;
}

.form-control:focus {
  border-color: var(--bragboard-gold);
  box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
  background-color: var(--card);
  color: var(--foreground);
}

.form-control::placeholder {
  color: var(--muted-foreground);
}

/* BragBoard Button Overrides */
.btn-primary {
  background-color: var(--bragboard-gold);
  border-color: var(--bragboard-gold);
  color: var(--bragboard-charcoal);
}

.btn-primary:hover {
  background-color: rgba(255, 215, 0, 0.9);
  border-color: rgba(255, 215, 0, 0.9);
  color: var(--bragboard-charcoal);
}

.btn-outline-primary {
  color: var(--bragboard-blue);
  border-color: var(--bragboard-blue);
}

.btn-outline-primary:hover {
  background-color: var(--bragboard-blue);
  border-color: var(--bragboard-blue);
  color: white;
}

/* BragBoard Text Utilities */
.text-muted {
  color: var(--muted-foreground) !important;
}

.text-dark {
  color: var(--foreground) !important;
}

/* BragBoard Border Utilities */
.border-secondary {
  border-color: var(--border) !important;
}

/* BragBoard Background Utilities */
.bg-white {
  background-color: var(--card) !important;
}

/* BragBoard Navbar Toggler */
.navbar-toggler {
  border-color: var(--border);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}