/* ========================================
   Design Tokens / CSS Variables
   Modern HSL Design System • Light/Dark Mode
======================================== */

@font-face {
  font-family: 'BR Firma';
  src: url('../fonts/bf_regular.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FigmaRegular';
  src: url('../fonts/bf_regular.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand Colors (Primary Purple / Violet) */
  --brand-h: 250;
  --brand-s: 70%;
  --brand-l: 64%;
  --color-primary: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
  --color-primary-dark: hsl(var(--brand-h), var(--brand-s), 54%);
  --color-primary-darker: hsl(var(--brand-h), var(--brand-s), 42%);
  --color-primary-light: hsl(var(--brand-h), 80%, 88%);
  --color-primary-lighter: hsl(var(--brand-h), 85%, 96%);
  --color-primary-fade: hsla(var(--brand-h), var(--brand-s), var(--brand-l), 0.12);
  --color-primary-glow: hsla(var(--brand-h), var(--brand-s), var(--brand-l), 0.28);

  /* Status Colors */
  --color-success: #10b981;
  --color-success-light: #ecfdf5;
  --color-success-dark: #059669;
  --color-danger: #ef4444;
  --color-danger-light: #fef2f2;
  --color-danger-dark: #dc2626;
  --color-warning: #f59e0b;
  --color-warning-light: #fffbeb;
  --color-warning-dark: #d97706;
  --color-info: #3b82f6;
  --color-info-light: #eff6ff;
  --color-info-dark: #2563eb;
  --color-secondary: #0ea5e9;

  /* Neutral Scale */
  --color-white: #ffffff;
  --color-black: #090d16;
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  --color-muted: #64748b;
  --color-light: #f8fafc;
  --color-dark: #0f172a;
  --color-border: #e2e8f0;
  --color-border-subtle: #f1f5f9;
  --color-text-inverse: #ffffff;

  /* Surface & Elevation (Light Mode Default) */
  --bg-dash-body: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-glass: rgba(255, 255, 255, 0.85);
  --bg-sidebar: rgba(255, 255, 255, 0.95);
  --bg-sidebar-toggle: #ffffff;
  --bg-header: rgba(255, 255, 255, 0.82);
  --surface-1: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  
  --sidebar-text: #475569;
  --text-main: #0f172a;
  --text-heading: #090d16;
  --text-muted: #64748b;
  --border-main: #e2e8f0;
  --border-focus: var(--color-primary);

  /* Touch & Layout Scale */
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 78px;
  --header-height: 70px;
  --bottom-nav-height: 64px;
  --touch-target: 48px;
  --loader-sz: 200px;

  /* Border Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 35px -10px rgba(15, 23, 42, 0.15);
  --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.06);
  --card-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-button: 0 4px 14px rgba(124, 99, 227, 0.35);
  --shadow-glow: 0 0 20px rgba(124, 99, 227, 0.25);

  /* Animation */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Typography */
  --font-family-base: 'BR Firma', sans-serif;
  --font-mono: 'BR Firma', monospace;
}

/* Dark Mode Overrides */
body.dark-mode,
.dark-mode {
  --bg-dash-body: #090d16;
  --bg-card: #131a29;
  --bg-card-glass: rgba(19, 26, 41, 0.88);
  --bg-sidebar: rgba(15, 23, 42, 0.95);
  --bg-sidebar-toggle: #1e293b;
  --bg-header: rgba(15, 23, 42, 0.85);
  --surface-1: #131a29;
  --surface-2: #1b2438;
  --surface-3: #232f48;

  --sidebar-text: #cbd5e1;
  --text-main: #f1f5f9;
  --text-heading: #ffffff;
  --text-muted: #94a3b8;
  --border-main: #243049;
  --border-subtle: #1c273c;
  --color-border: #243049;

  --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 25px rgba(124, 99, 227, 0.35);

  --color-gray-50: #0f172a;
  --color-gray-100: #131a29;
  --color-gray-200: #1e293b;
  --color-gray-300: #334155;
  --color-gray-400: #64748b;
  --color-gray-700: #cbd5e1;
  --color-gray-900: #f8fafc;
  --color-white: #131a29;
}

/* Global Transitions */
body {
  font-family: var(--font-family-base);
  background-color: var(--bg-dash-body);
  color: var(--text-main);
  transition: background-color var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Smooth Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}
body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--color-gray-700);
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-500);
}