/**
 * MarketTOX Color System - Material Design Dark Theme
 * Following Material Design elevation and color guidelines
 * https://m2.material.io/design/color/dark-theme.html
 */

:root {
  /* Material Design Elevation System - Base surface: #121212 */
  --surface-0dp: #121212;   /* Base background (was #000000) */
  --surface-1dp: #000000;   /* Cards, sidebars - slightly elevated */
  --surface-2dp: #232323;   /* App bars, navigation */
  --surface-3dp: #252525;   /* Floating action buttons */
  --surface-4dp: #272727;   /* Modals, dialogs */
  --surface-6dp: #2C2C2C;   /* Elevated navigation drawers */
  --surface-8dp: #2E2E2E;   /* Dropdown menus, tooltips */
  --surface-12dp: #333333;  /* Highest elevation */
  
  /* Primary Colors - Main brand color */
  --primary-color: #73777A;
  --primary-hover: #626262;
  --primary-light: #73777A;
  --primary-shadow: #1E1E1E;
  --text-color: #898989;
  
  /* Secondary/Accent Colors - Desaturated for dark theme (Material Design 200 tone) */
  --secondary-color: #626262;  /* Desaturated orange - better for dark backgrounds */
  --secondary-hover: #4f6466;  /* Lighter on hover */
  --secondary-light: #8d8d8d;
  --secondary-shadow: rgba(255, 107, 53, 0.3);
  
  /* Purple accent - Desaturated (Material Design 200 tone) */
  --purple: #CE93D8;        /* Desaturated purple for dark theme */
  --purple-dark: #AB47BC;   /* Darker shade */
  --purple-darker: #8E24AA; /* Darkest shade */
  
  /* Material Design Text Colors (on dark backgrounds) */
  --text-high-emphasis: #E8E8E8;     /* 87% white - primary text */
  --text-medium-emphasis: #9AA0A6;   /* 60% white - secondary text */
  --text-disabled: #666666;          /* 38% white - disabled text */
  
  /* Legacy Grayscale (keeping for compatibility) */
  --black: #121212;          /* Updated to Material Design baseline */
  --dark-bg: #1E1E1E;        /* Updated to 1dp elevation */
  --border-gray: #333333;
  --text-gray: #9AA0A6;
  --text-light-gray: #73777A;
  --white: #E8E8E8;          /* Updated to high emphasis text */

  /* Background and Grid */
  --bg-main: #121212;        /* Material Design baseline */
  --grid-color: #1E1E1E;     /* Slightly lighter for contrast */
  --grid-size: 20px;
  
  /* Success/Error/Warning - Desaturated for dark theme */
  --success: #66BB6A;        /* Material Green 400 */
  --error: #EF5350;          /* Material Red 400 */
  --warning: #FFA726;        /* Material Orange 400 */
  
  /* Font System */
  --font-main: "Rubik", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: "Rubik", sans-serif;
  --font-mono: "Ubuntu Mono", monospace;
}

/* Utility classes using variables */
.text-primary { color: var(--primary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.border-primary { border-color: var(--primary-color) !important; }

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