@import 'tailwindcss';

@layer base {
  :root {
    /* Light Theme Colors */
    --background: #ffffff;
    --foreground: #0a0a0f;
    --card: #ffffff;
    --card-foreground: #0a0a0f;
    --popover: #fafafa;
    --popover-foreground: #0a0a0f;
    --primary: #ff9447;
    --primary-foreground: #ffffff;
    --secondary: #f4f4f5;
    --secondary-foreground: #18181b;
    --muted: #f4f4f5;
    --muted-foreground: #71717a;
    --accent: #f4f4f5;
    --accent-foreground: #18181b;
    --destructive: #ef4444;
    --destructive-foreground: #fafafa;
    --border: #e4e4e7;
    --input: #e4e4e7;
    --ring: #ff9447;
    --radius: 0.5rem;

    /* Grafana Chart Colors */
    --chart-blue: #1f77b4;
    --chart-orange: #ff7f0e;
    --chart-green: #2ca02c;
    --chart-red: #d62728;
    --chart-purple: #9467bd;
    --chart-brown: #8c564b;
    --chart-pink: #e377c2;
    --chart-gray: #7f7f7f;
    --chart-olive: #bcbd22;
    --chart-cyan: #17becf;
  }

  .dark {
    /* Dark Theme Colors - VS Code Inspired */
    --background: #1a1d29;
    --foreground: #e8eaed;
    --card: #252834;
    --card-foreground: #e8eaed;
    --popover: #2d3142;
    --popover-foreground: #e8eaed;
    --primary: #ff9447;
    --primary-foreground: #ffffff;
    --secondary: #3a3f52;
    --secondary-foreground: #e8eaed;
    --muted: #4a5064;
    --muted-foreground: #a0a4b8;
    --accent: #3a3f52;
    --accent-foreground: #e8eaed;
    --destructive: #ef5350;
    --destructive-foreground: #e8eaed;
    --border: #3a3f52;
    --input: #3a3f52;
    --ring: #ff9447;

    /* Grafana Chart Colors */
    --chart-blue: #3eb0ff;
    --chart-orange: #ff9830;
    --chart-green: #73bf69;
    --chart-red: #f2495c;
    --chart-purple: #b581d8;
    --chart-brown: #c4a2e0;
    --chart-pink: #ff9d96;
    --chart-gray: #9ba3af;
    --chart-olive: #fac858;
    --chart-cyan: #37b7c3;
  }

  * {
    border-color: var(--border);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-feature-settings: 'rlig' 1, 'calt' 1;
  }
}

@layer utilities {
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted-foreground) 20%, transparent);
    border-radius: 0.375rem;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--muted-foreground) 30%, transparent);
  }
}