/**
 * Lua Admin - Dark Theme Design System
 * Based on Angular Frontend Design System
 */

/* Import Noto Sans Display font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@100;400;600;700;800&display=swap');

:root {
  /* Dark theme backgrounds */
  --color-bg-primary: #252525;
  --color-bg-secondary: #292929;
  --color-bg-tertiary: #1f1f1f;

  /* Accent colors */
  --color-accent: #e5ff78;
  --color-accent-hover: #d4ee67;

  /* Text colors */
  --color-text-primary: #FFFFFFDE;
  --color-text-secondary: #FFFFFF99;
  --color-text-disabled: #FFFFFF4D;

  /* Status colors */
  --color-success: #90beba;
  --color-error: #cf6679;
  --color-warning: #feefb3;
  --color-warning-text: #9f6000;
  --color-info: #d3e5e4;

  /* Spacing scale (8px base) */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 28px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;

  /* Layout dimensions */
  --sidebar-width: 256px;
  --toolbar-height: 120px;

  /* Overlays */
  --overlay-light: rgba(255, 255, 255, 0.08);
  --overlay-hover: rgba(255, 255, 255, 0.14);
  --overlay-accent: rgba(229, 255, 120, 0.2);
  --overlay-accent-strong: rgba(229, 255, 120, 0.3);

  /* Typography */
  --font-size-base: 14px;
  --font-family: 'Noto Sans Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-thin: 100;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Borders */
  --border-color: rgba(229, 255, 120, 0.1);
  --border-color-strong: rgba(229, 255, 120, 0.2);
}

/* Global resets */
html {
  font-size: var(--font-size-base);
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  scrollbar-width: thin;
  scrollbar-color: var(--overlay-light) var(--color-bg-primary);
}

* {
  box-sizing: border-box;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin: 8px 0;
  font-family: var(--font-family);
  color: var(--color-text-primary);
}

p, span {
  margin: 0;
  font-family: var(--font-family);
}

/* Links */
a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

a:active {
  color: var(--color-accent-hover);
}

/* Prevent underline on buttons and nav items */
.btn,
.btn:hover,
.btn:focus,
.btn:active,
.nav-link,
.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.dropdown-item,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:active,
button a,
button a:hover,
button a:focus,
button a:active {
  text-decoration: none !important;
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--overlay-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--overlay-hover);
}

/* Utility classes */
.text-bold {
  font-weight: var(--font-weight-bold) !important;
}

.text-semibold {
  font-weight: var(--font-weight-semibold) !important;
}

.no-margin {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

.w-100 {
  width: 100% !important;
}

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

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

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

.bg-dark-primary {
  background: var(--color-bg-primary) !important;
}

.bg-dark-secondary {
  background: var(--color-bg-secondary) !important;
}

.bg-accent {
  background: var(--color-accent) !important;
  color: var(--color-bg-primary) !important;
}