Copy

@import "tailwindcss";

@theme {
  --color-primary-50: var(--color-amber-50);
  --color-primary-100: var(--color-amber-100);
  --color-primary-200: var(--color-amber-200);
  --color-primary-300: var(--color-amber-300);
  --color-primary-400: var(--color-amber-400);
  --color-primary-500: var(--color-amber-500);
  --color-primary-600: var(--color-amber-600);
  --color-primary-700: var(--color-amber-700);
  --color-primary-800: var(--color-amber-800);
  --color-primary-900: var(--color-amber-900);
  --color-primary-950: var(--color-amber-950);

  --color-secondary-50: var(--color-lime-50);
  --color-secondary-100: var(--color-lime-100);
  --color-secondary-200: var(--color-lime-200);
  --color-secondary-300: var(--color-lime-300);
  --color-secondary-400: var(--color-lime-400);
  --color-secondary-500: var(--color-lime-500);
  --color-secondary-600: var(--color-lime-600);
  --color-secondary-700: var(--color-lime-700);
  --color-secondary-800: var(--color-lime-800);
  --color-secondary-900: var(--color-lime-900);
  --color-secondary-950: var(--color-lime-950);

  --color-muted: var(--color-stone-400);
  --color-main-text: var(--color-stone-300);

  --font-sans:
    "Noto Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono:
    "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

@layer base {
  html,
  body {
    color-scheme: dark;
    accent-color: var(--color-primary-500);
    @apply text-main-text selection:bg-secondary-300/10 selection:text-secondary-500 bg-stone-950;
  }

  button:not(.plotly):not(.plotly *) {
    @apply flex cursor-pointer items-center gap-2 rounded transition-colors;

    &:not(:disabled) {
      @apply hover:text-stone-200;
    }

    &:disabled {
      @apply cursor-default opacity-50;
    }
  }

  input[type="datetime-local"],
  input[type="number"],
  input[type="text"] {
    @apply focus:border-primary-500 rounded-md border border-stone-700 bg-stone-900/70 px-2 py-0.5 text-xs select-none focus:outline-none;
  }

  kbd {
    @apply font-semibold uppercase;
  }

  label {
    @apply cursor-pointer transition-colors select-none;
  }
}

@layer components {
  .filter-label {
    @apply flex items-center gap-2 text-xs font-semibold whitespace-nowrap;
  }

  .page-container {
    @apply m-4 flex flex-col gap-6;
  }

  .page-header {
    @apply flex flex-wrap items-center justify-between gap-4;
  }

  .page-title {
    @apply flex items-center gap-2 text-2xl font-bold;
  }

  .card {
    @apply flex flex-col rounded-xl border border-stone-800 bg-[#141210] p-4;
  }

  .chart-container {
    @apply relative min-h-[400px] flex-1 rounded-lg border border-stone-800 bg-stone-900 p-2 md:h-full;
  }

  .section-title {
    @apply mb-4 flex items-center gap-2 text-lg font-semibold;
  }

  .stat-label {
    @apply text-sm text-stone-400;
  }

  .stat-value {
    @apply text-sm font-semibold;
  }

  .btn-secondary {
    @apply inline-flex items-center gap-2 rounded border border-stone-700 bg-stone-800 px-2 py-1 text-xs font-medium no-underline transition-colors;

    &:not(:disabled) {
      @apply hover:bg-stone-700;
    }

    .tabler-icon {
      @apply text-muted h-[1.75em] w-[1.75em];
    }
  }

  .bg-card {
    @apply bg-[#141210];
  }

  .icon-button {
    @apply text-muted rounded border border-stone-200/10 bg-stone-800/50 p-1 transition-all hover:bg-stone-800/60 hover:text-stone-100;
  }

  .tabler-icon {
    @apply min-w-min;
  }

  .select {
    @apply rounded border border-stone-600 bg-stone-800 px-1 py-0.5 text-xs font-semibold;
  }
}

body .plotly-notifier .notifier-note {
  @apply rounded border border-stone-700 bg-stone-800 text-stone-300;
}

body .js-plotly-plot .plotly [data-title] {
  &::before {
    @apply border-t-transparent border-r-transparent border-b-stone-700 border-l-transparent;
  }

  &::after {
    @apply rounded bg-stone-700 text-stone-300;
  }
}