@import "tailwindcss";

@layer base {
  :root,
  :root.dark {
    --primary-color: #006A4E;
    --secondary-color: #F42A41;
    --bg-color: #0A0D0F;
    --card-color: #13181D;
    --sub-card-bg: #141A20;
    --sub-card-hover: #1C242C;
    --input-bg: #0A0D0F;
    --text-color: #F0F4F8;
    --heading-color: #FFFFFF;
    --muted-text-color: #8A99A8;
    --border-color: #222A33;
    --sub-border-color: #1C242C;
    --accent-color: #F59E0B;
    --rank1-bg: #1C2422;
    --rank1-border: #EAB308;
    --rank2-bg: #171E24;
    --rank3-bg: #141B20;
    --header-bg: #0A0D0FEE;
    --footer-bg: #07090B;
    --modal-bg: #13181D;
    --modal-header-bg: #0E1317;
    --rank-badge-top-bg: rgba(69, 26, 3, 0.4);
    --rank-badge-top-border: rgba(146, 64, 14, 0.4);
    --rank-badge-top-text: #D97706;
    --rank-badge-default-bg: rgba(30, 41, 59, 0.8);
    --rank-badge-default-border: #334155;
    --rank-badge-default-text: #94A3B8;
    --border-radius: 12px;
    --banner-gradient-from: #141B20;
    --banner-gradient-to: #0D1216;
  }

  :root.light {
    --primary-color: #006A4E;
    --secondary-color: #F42A41;
    --bg-color: #F8FAFC;
    --card-color: #FFFFFF;
    --sub-card-bg: #F1F5F9;
    --sub-card-hover: #E2E8F0;
    --input-bg: #FFFFFF;
    --text-color: #1E293B;
    --heading-color: #0F172A;
    --muted-text-color: #64748B;
    --border-color: #E2E8F0;
    --sub-border-color: #E2E8F0;
    --accent-color: #D97706;
    --rank1-bg: #FFFDF5;
    --rank1-border: #F59E0B;
    --rank2-bg: #F8FAFC;
    --rank3-bg: #FFFFFF;
    --header-bg: #FFFFFFAA;
    --footer-bg: #F1F5F9;
    --modal-bg: #FFFFFF;
    --modal-header-bg: #F8FAFC;
    --rank-badge-top-bg: #FEF3C7;
    --rank-badge-top-border: #FDE68A;
    --rank-badge-top-text: #B45309;
    --rank-badge-default-bg: #F1F5F9;
    --rank-badge-default-border: #E2E8F0;
    --rank-badge-default-text: #64748B;
    --border-radius: 12px;
    --banner-gradient-from: #FFFFFF;
    --banner-gradient-to: #F1F5F9;
  }

  body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color, #0A0D0F);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color, #222A33);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748B;
}

/* Hide scrollbar for category pills */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

