@import "tailwindcss";

/* ------------------------------------------------------------------ design tokens
   Brand-neutral palette (validated with the dataviz skill in light & dark).
   Everything is referenced by role; the dark values swap in one place. */
:root {
  color-scheme: light;
  --surface-0: #f4f4f1;   /* page plane */
  --surface-1: #fcfcfb;   /* cards, chart surface */
  --surface-2: #f0efec;   /* table header, inset */
  --surface-3: #e6e5df;   /* hover wash */
  --ink-1: #0b0b0b;
  --ink-2: #52514e;
  --ink-3: #898781;
  --hairline: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;
  --accent-ink: #1c5cab;
  --accent-soft: #cde2fb;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --seq-100: #cde2fb; --seq-200: #9ec5f4; --seq-300: #6da7ec; --seq-400: #3987e5;
  --seq-500: #256abf; --seq-600: #184f95; --seq-700: #0d366b;
  --ok: #0ca30c;      --ok-ink: #006300;      --ok-soft: #dcf3dc;
  --warn: #fab219;    --warn-ink: #7a4f00;    --warn-soft: #fdf0cc;
  --serious: #ec835a; --serious-ink: #8a3a1a; --serious-soft: #fde3d8;
  --crit: #d03b3b;    --crit-ink: #a02020;    --crit-soft: #f8dada;
  --focus: #2a78d6;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface-0: #0d0d0d;
    --surface-1: #1a1a19;
    --surface-2: #222220;
    --surface-3: #2c2c2a;
    --ink-1: #f0efec;
    --ink-2: #c3c2b7;
    --ink-3: #898781;
    --hairline: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --accent: #3987e5;
    --accent-ink: #86b6ef;
    --accent-soft: #184f95;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --seq-100: #0d366b; --seq-200: #184f95; --seq-300: #256abf; --seq-400: #2a78d6;
    --seq-500: #3987e5; --seq-600: #6da7ec; --seq-700: #9ec5f4;
    --ok: #0ca30c;      --ok-ink: #5fd15f;      --ok-soft: #10321a;
    --warn: #fab219;    --warn-ink: #fab219;    --warn-soft: #3a2b05;
    --serious: #ec835a; --serious-ink: #f3a483; --serious-soft: #3d1f12;
    --crit: #d03b3b;    --crit-ink: #ef7a7a;    --crit-soft: #3d1414;
    --focus: #6da7ec;
  }
}

@theme inline {
  --color-surface-0: var(--surface-0);
  --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-ink-1: var(--ink-1);
  --color-ink-2: var(--ink-2);
  --color-ink-3: var(--ink-3);
  --color-hairline: var(--hairline);
  --color-axis: var(--axis);
  --color-border: var(--border);
  --color-accent: var(--accent);
  --color-accent-ink: var(--accent-ink);
  --color-accent-soft: var(--accent-soft);
  --color-ok: var(--ok);
  --color-ok-ink: var(--ok-ink);
  --color-ok-soft: var(--ok-soft);
  --color-warn: var(--warn);
  --color-warn-ink: var(--warn-ink);
  --color-warn-soft: var(--warn-soft);
  --color-serious: var(--serious);
  --color-serious-ink: var(--serious-ink);
  --color-serious-soft: var(--serious-soft);
  --color-crit: var(--crit);
  --color-crit-ink: var(--crit-ink);
  --color-crit-soft: var(--crit-soft);
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* ------------------------------------------------------------------ base */
html, body { height: 100%; }
body {
  background: var(--surface-0);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { border-color: var(--border); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--accent-soft); }
a { color: inherit; }
code, pre, kbd, .mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ components */
@layer components {
  .card { @apply rounded-lg border border-border bg-surface-1 p-4; }
  .card-title { @apply mb-3 flex items-center justify-between gap-2 text-sm font-semibold text-ink-1; }
  .muted { @apply text-ink-3; }
  .label { @apply mb-1 block text-xs font-medium text-ink-2; }
  .input {
    @apply w-full rounded-md border border-border bg-surface-1 px-2.5 py-1.5 text-sm text-ink-1 placeholder:text-ink-3;
    @apply focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30 disabled:opacity-60;
  }
  select.input { @apply pr-7; }
  .btn {
    @apply inline-flex items-center justify-center gap-1.5 rounded-md border border-border bg-surface-1 px-3 py-1.5 text-sm font-medium text-ink-1;
    @apply hover:bg-surface-3 disabled:cursor-not-allowed disabled:opacity-50 active:translate-y-px;
  }
  .btn-primary { @apply border-transparent bg-accent text-white hover:bg-accent hover:brightness-110; }
  .btn-danger { @apply border-transparent bg-crit text-white hover:brightness-110; }
  .btn-sm { @apply px-2 py-1 text-xs; }
  .btn-ghost { @apply border-transparent bg-transparent; }
  .pill { @apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap; }
  .table-wrap { @apply -mx-4 overflow-x-auto px-4 sm:mx-0 sm:px-0; }
  .table { @apply w-full border-collapse text-sm; }
  .table th { @apply sticky top-0 z-[1] border-b border-hairline bg-surface-2 px-2.5 py-2 text-left text-xs font-semibold text-ink-2 whitespace-nowrap; }
  .table td { @apply border-b border-hairline px-2.5 py-1.5 align-top text-ink-1; }
  .table tbody tr:hover td { background: var(--surface-2); }
  .table .num { @apply text-right tnum; }
  .kbd { @apply rounded border border-border bg-surface-2 px-1 py-px font-mono text-[11px] text-ink-2; }
  .banner { @apply rounded-md border px-3 py-2 text-sm; }
  .nav-link { @apply flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm text-ink-2 hover:bg-surface-3 hover:text-ink-1; }
  .nav-link[aria-current="page"] { @apply bg-accent-soft text-accent-ink font-medium; }
  .section-title { @apply text-lg font-semibold tracking-tight text-ink-1; }
  .skeleton { @apply animate-pulse rounded bg-surface-3; }
}

/* recharts chrome */
.recharts-cartesian-grid line { stroke: var(--hairline); }
.recharts-cartesian-axis line, .recharts-cartesian-axis-tick-line { stroke: var(--axis); }
.recharts-text { fill: var(--ink-3); font-size: 11px; }
.recharts-tooltip-cursor { stroke: var(--axis); }

/* dialog backdrop */
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }

/* hide number spinners for dense forms */
input[type="number"]::-webkit-inner-spin-button { opacity: 0.4; }