@import "tailwindcss";

/* ============================================
   Divisi Metrics — Tailwind v4 Theme
   ============================================ */

@theme {
  /* Divisi color palette (SnowUI Dark) */
  --color-divisi-bg: #0a0a0a;
  --color-divisi-card: #141414;
  --color-divisi-border: rgba(255, 255, 255, 0.08);
  --color-divisi-accent: #c8e600;
  --color-divisi-accent-hover: #d4f000;
  --color-divisi-text-primary: #ffffff;
  --color-divisi-text-secondary: #a0a0a0;

  /* Chart color palette */
  --color-chart-primary: #c8e600;
  --color-chart-secondary: #1a1a2e;
  --color-chart-tertiary: #16213e;
  --color-chart-quaternary: #0f3460;
  --color-chart-quinary: #533483;

  /* Font family — Inter with system fallbacks */
  --font-sans: "Inter", system-ui, sans-serif;

  /* Border-radius design tokens */
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-badge: 6px;

  /* Spacing design tokens */
  --spacing-card-padding: 20px;
  --spacing-grid-gap: 24px;
  --spacing-page-margin: 24px;
}

/* ============================================
   Base / Dark Background Defaults
   ============================================ */

html {
  background-color: var(--color-divisi-bg);
  color: var(--color-divisi-text-primary);
}

body {
  background-color: var(--color-divisi-bg);
  color: var(--color-divisi-text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Custom Scrollbar Styles
   ============================================ */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-divisi-bg);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) var(--color-divisi-bg);
}

/* ============================================
   Sidebar Mobile Drawer Animation
   ============================================ */

@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.animate-slide-in {
  animation: slide-in-left 0.2s ease-out;
}

/* ============================================
   Chart Fade-In Animation
   ============================================ */

@keyframes chart-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-chart-fade-in {
  animation: chart-fade-in 0.6s ease-out forwards;
}

/* ============================================
   Prefers Reduced Motion Support
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .animate-slide-in {
    animation: none;
    transform: translateX(0);
  }

  .animate-chart-fade-in {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   Selection Highlight
   ============================================ */

::selection {
  background-color: var(--color-divisi-accent);
  color: var(--color-divisi-bg);
}

/* ============================================
   Light Mode Overrides
   ============================================ */

html[data-theme="light"] {
  --color-divisi-bg: #f5f5f5 !important;
  --color-divisi-card: #ffffff !important;
  --color-divisi-border: rgba(0, 0, 0, 0.1) !important;
  --color-divisi-text-primary: #1a1a1a !important;
  --color-divisi-text-secondary: #6b7280 !important;
}

html[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f5f5f5;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] * {
  scrollbar-color: rgba(0, 0, 0, 0.15) #f5f5f5;
}

html[data-theme="light"] ::selection {
  background-color: var(--color-divisi-accent);
  color: #ffffff;
}