@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline {
  --font-sans: var(--font-outfit);
  --font-heading: var(--font-outfit);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-popover: var(--card);
  --color-popover-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--muted);
  --color-secondary-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--primary);
  --color-sidebar: var(--card);
  --color-sidebar-active: var(--accent);
  --color-sidebar-active-foreground: var(--accent-foreground);
  --color-auth-action: var(--auth-action);
  --color-auth-muted: var(--auth-muted);
  --color-auth-cover: var(--auth-cover);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-info: var(--info);
  --color-carbon: var(--carbon);
  --color-carbon-surface: var(--carbon-surface);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
}
:root {
  --background: #fff;
  --foreground: #1c1c1e;
  --card: #fff;
  --primary: #556458;
  --primary-foreground: #fff;
  --muted: #f2f2f7;
  --muted-foreground: #8e8e93;
  --accent: #eff9f1;
  --accent-foreground: #a6c3aa;
  --border: #e5e5ea;
  --input: #d1d1d6;
  --destructive: #d92d20;
  --success: #12b76a;
  --warning: #f79009;
  --info: #0a84ff;
  --auth-action: #0a84ff;
  --auth-muted: #6e6e73;
  --auth-shadow: rgb(10 132 255 / 20%);
  --auth-cover: #2a2e2b;
  --chart-1: #027a48;
  --chart-2: #12b76a;
  --chart-3: #a6f4c5;
  --chart-4: #4e5ba6;
  --carbon: #075985;
  --carbon-surface: #f0f9ff;
}
.dark {
  --background: #0c0c0d;
  --foreground: #f2f2f7;
  --card: #1c1c1e;
  --primary: #556458;
  --primary-foreground: #fff;
  --muted: #2a2a2c;
  --muted-foreground: #8e8e93;
  --accent: #a6c3aa1f;
  --accent-foreground: #a6c3aa;
  --border: #ffffff0d;
  --input: #48484a;
  --auth-muted: #d1d1d6;
  --carbon: #7dd3fc;
  --carbon-surface: #0759851a;
}
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-sans text-sm antialiased;
  }
  button,
  a,
  input,
  select {
    -webkit-tap-highlight-color: transparent;
  }
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]) {
    cursor: pointer;
  }
  :focus-visible {
    @apply outline-2 outline-offset-2 outline-primary;
  }
}
@layer components {
  .panel {
    @apply rounded-xl border border-border bg-card;
  }
  .detail-panel {
    @apply rounded-2xl border border-input/70 bg-card shadow-sm;
  }
  .field-label {
    @apply mb-2 block text-sm font-medium;
  }
  .data-table {
    @apply w-full border-collapse text-sm;
  }
  .data-table th {
    @apply border border-border px-4 py-3 text-center text-xs font-medium text-muted-foreground;
  }
  .data-table td {
    @apply border border-border px-4 py-4 align-middle;
  }
  .data-table tbody tr:hover {
    @apply bg-muted/30;
  }
  .data-table a {
    @apply hover:text-primary;
  }
  .metric-label {
    @apply text-xs font-medium uppercase text-muted-foreground;
  }
  .auth-panel {
    box-shadow: 0 18px 40px rgb(28 28 30 / 8%);
  }
  .chart-container .apexcharts-tooltip {
    @apply border-border! bg-popover! text-foreground!;
  }
  .chart-container .apexcharts-tooltip-title {
    @apply border-border! bg-muted!;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}