@import "tailwindcss";

@theme {
  --color-background: var(--color-background);
  --color-on-background: var(--color-on-background);
  --color-surface: var(--color-surface);
  --color-on-surface: var(--color-on-surface);
  --color-on-surface-variant: var(--color-on-surface-variant);
  --color-surface-container: var(--color-surface-container);
  --color-surface-container-high: var(--color-surface-container-high);
  
  --color-primary: var(--color-primary);
  --color-on-primary: var(--color-on-primary);
  --color-primary-container: var(--color-primary-container);
  --color-on-primary-container: var(--color-on-primary-container);
  
  --color-secondary: var(--color-secondary);
  --color-on-secondary: var(--color-on-secondary);
  --color-secondary-container: var(--color-secondary-container);
  --color-on-secondary-container: var(--color-on-secondary-container);
  
  --color-tertiary: var(--color-tertiary);
  --color-on-tertiary: var(--color-on-tertiary);
  --color-tertiary-container: var(--color-tertiary-container);
  --color-on-tertiary-container: var(--color-on-tertiary-container);
  
  --color-chart-1: var(--color-chart-1);
  --color-chart-2: var(--color-chart-2);
  --color-chart-3: var(--color-chart-3);
  --color-chart-4: var(--color-chart-4);
  --color-chart-5: var(--color-chart-5);
  --color-chart-5-container: var(--color-chart-5-container);
  
  --color-outline: var(--color-outline);
  --color-outline-variant: var(--color-outline-variant);

  --color-metric-high: var(--color-metric-high);
  --color-metric-mid: var(--color-metric-mid);
  --color-metric-warn: var(--color-metric-warn);
  --color-metric-low: var(--color-metric-low);

  --shadow-elevation-1: var(--shadow-elevation-1);
  --shadow-elevation-2: var(--shadow-elevation-2);
  --shadow-elevation-3: var(--shadow-elevation-3);
}

:root {
  --color-background: #fafafa;
  --color-on-background: #1c1b1f;
  --color-surface: #ffffff;
  --color-on-surface: #1c1b1f;
  --color-on-surface-variant: #49454f;
  
  --color-surface-container: #f5f5f5;
  --color-surface-container-high: #e5e5e5;
  
  --color-primary: #0060d4;
  --color-on-primary: #ffffff;
  --color-primary-container: #d2e4ff;
  --color-on-primary-container: #001c45;
  
  --color-secondary: #625b71;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #e8def8;
  --color-on-secondary-container: #1d192b;
  
  --color-tertiary: #7d5260;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #ffd8e4;
  --color-on-tertiary-container: #31111d;
  
  --color-chart-1: #00897b;
  --color-chart-2: #e53935;
  --color-chart-3: #1976d2;
  --color-chart-4: #0288d1;
  --color-chart-5: #0077b6;
  --color-chart-5-container: #e1effe;
  
  --color-outline: #79747e;
  --color-outline-variant: #cac4d0;

  --color-metric-high: #00c853;
  --color-metric-mid: #00b0ff;
  --color-metric-warn: #f57c00;
  --color-metric-low: #d50000;

  --shadow-elevation-1: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px 1px rgba(0, 0, 0, 0.05);
  --shadow-elevation-2: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 6px 2px rgba(0, 0, 0, 0.05);
  --shadow-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.05), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}

.dark {
  --color-background: #121212;
  --color-on-background: #e6e1e5;
  --color-surface: #1e1e1e;
  --color-on-surface: #e6e1e5;
  --color-on-surface-variant: #cac4d0;
  
  --color-surface-container: #252525;
  --color-surface-container-high: #2b2b2b;
  
  --color-primary: #a6c8ff;
  --color-on-primary: #003073;
  --color-primary-container: #0048a6;
  --color-on-primary-container: #d2e4ff;
  
  --color-secondary: #ccc2dc;
  --color-on-secondary: #332d41;
  --color-secondary-container: #4a4458;
  --color-on-secondary-container: #e8def8;
  
  --color-tertiary: #efb8c8;
  --color-on-tertiary: #492532;
  --color-tertiary-container: #633b48;
  --color-on-tertiary-container: #ffd8e4;
  
  --color-chart-1: #03dac6;
  --color-chart-2: #cf6679;
  --color-chart-3: #82b1ff;
  --color-chart-4: #00e5ff;
  --color-chart-5: #c2e7ff;
  --color-chart-5-container: #004a77;
  
  --color-outline: #938f99;
  --color-outline-variant: #49454f;

  --color-metric-high: #69f0ae;
  --color-metric-mid: #40c4ff;
  --color-metric-warn: #ffd740;
  --color-metric-low: #ff8a80;

  --shadow-elevation-1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --shadow-elevation-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --shadow-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

@layer utilities {
  .text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, var(--color-primary), var(--color-chart-4));
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-background);
}
::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-outline);
}