@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: var(--font-jetbrains), ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --color-bg: var(--bg);
  --color-panel: var(--panel);
  --color-panel-2: var(--panel-2);
  --color-panel-3: var(--panel-3);
  --color-fg: var(--fg);
  --color-fg-muted: var(--fg-muted);
  --color-fg-subtle: var(--fg-subtle);
  --color-line: var(--line);
  --color-line-strong: var(--line-strong);
  --color-signal: var(--signal);
  --color-signal-soft: var(--signal-soft);
  --color-hot: var(--hot);
  --color-high: var(--high);
  --color-mid: var(--mid);
  --color-low: var(--low);
  --color-silent: var(--silent);
  --color-silent-soft: var(--silent-soft);
  --color-danger: var(--danger);
  --color-warn: var(--warn);
  --color-ok: var(--ok);
  --color-info: var(--info);

  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;

  --animate-pulse-dot: pulse-dot 1.6s ease-in-out infinite;
  --animate-flash: flash 1.4s ease-out both;
  --animate-fade-in: fade-in 0.2s ease-out both;
  --animate-slide-in: slide-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  --animate-sheet-up: sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  --animate-row-in: row-in 0.35s ease-out both;
  --animate-tick: tick 0.6s ease-out both;

  @keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--signal) 55%, transparent); }
    60% { box-shadow: 0 0 0 6px transparent; }
  }
  @keyframes flash {
    0% { background-color: color-mix(in oklab, var(--signal) 22%, transparent); }
    100% { background-color: transparent; }
  }
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes slide-in {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes sheet-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes row-in {
    from { opacity: 0; transform: translateY(-6px); background-color: color-mix(in oklab, var(--signal) 18%, transparent); }
    to { opacity: 1; transform: translateY(0); background-color: transparent; }
  }
  @keyframes tick {
    0% { color: var(--signal); }
    100% { color: inherit; }
  }
}

:root {
  color-scheme: light;
  --bg: #f6f7fa;
  --panel: #ffffff;
  --panel-2: #eff1f5;
  --panel-3: #e6e9ef;
  --fg: #0d1220;
  --fg-muted: #4a5468;
  --fg-subtle: #7f889b;
  --line: #e1e5ec;
  --line-strong: #c3cad6;
  --signal: #0f9f7d;
  --signal-soft: #dcf5ee;
  --hot: #d12b2b;
  --high: #e26a12;
  --mid: #b7860b;
  --low: #7f889b;
  --silent: #6d4fd6;
  --silent-soft: #ede8fb;
  --danger: #d12b2b;
  --warn: #c57a0a;
  --ok: #0f9f7d;
  --info: #2b63d9;

  /* density (spec §32) — overridden by [data-density] */
  --row-py: 7px;
  --row-gap: 4px;
  --fs-row: 13.5px;
  --fs-meta: 11.5px;
}

.dark {
  color-scheme: dark;
  --bg: #0a0e15;
  --panel: #10161f;
  --panel-2: #151c28;
  --panel-3: #1b2331;
  --fg: #e6e8ee;
  --fg-muted: #a3adc2;
  --fg-subtle: #6b7591;
  --line: #1c2533;
  --line-strong: #2d394e;
  --signal: #22d3a5;
  --signal-soft: #0f2a24;
  --hot: #ff5c5c;
  --high: #ff9640;
  --mid: #e4b53b;
  --low: #6b7591;
  --silent: #a78bfa;
  --silent-soft: #241c3d;
  --danger: #ff5c5c;
  --warn: #e4b53b;
  --ok: #22d3a5;
  --info: #6ea0ff;
}

[data-density="compact"] {
  --row-py: 3px;
  --row-gap: 2px;
  --fs-row: 12.5px;
  --fs-meta: 10.5px;
}
[data-density="comfortable"] {
  --row-py: 11px;
  --row-gap: 6px;
  --fs-row: 14.5px;
  --fs-meta: 12px;
}

@layer base {
  * {
    border-color: var(--line);
  }
  html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    scrollbar-gutter: stable;
  }
  body {
    @apply bg-bg text-fg font-sans antialiased;
    font-size: 14px;
    line-height: 1.5;
  }
  ::selection {
    background: color-mix(in oklab, var(--signal) 30%, transparent);
  }
  :focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 1px;
    border-radius: 3px;
  }
  h1, h2, h3 {
    letter-spacing: -0.015em;
  }
  code, kbd, pre, samp {
    @apply font-mono;
    font-size: 0.92em;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 6px;
    border: 2px solid var(--bg);
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@utility hairline {
  border-bottom: 1px solid var(--line);
}
@utility tabular {
  font-variant-numeric: tabular-nums;
}
@utility panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
@utility label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 600;
}
@utility row-dense {
  padding-top: var(--row-py);
  padding-bottom: var(--row-py);
  font-size: var(--fs-row);
}
@utility meta {
  font-size: var(--fs-meta);
}
@utility offscreen-ok {
  content-visibility: auto;
  contain-intrinsic-size: auto 64px;
}
@utility no-scrollbar {
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}

.diff-line-add { background: color-mix(in oklab, var(--ok) 14%, transparent); color: var(--fg); }
.diff-line-del { background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--fg); }
.diff-line-meta { color: var(--fg-subtle); }
.diff-line-hunk { color: var(--info); background: color-mix(in oklab, var(--info) 8%, transparent); }

/* skeletons (spec §113) */
.skeleton {
  position: relative;
  overflow: hidden;
  background: color-mix(in oklab, var(--panel-2) 80%, var(--panel-3));
  border-radius: 4px;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fg) 6%, transparent), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* heatmap cells (spec §102) */
.heat-0 { background: var(--panel-2); }
.heat-1 { background: color-mix(in oklab, var(--signal) 22%, var(--panel-2)); }
.heat-2 { background: color-mix(in oklab, var(--signal) 42%, var(--panel-2)); }
.heat-3 { background: color-mix(in oklab, var(--signal) 65%, var(--panel-2)); }
.heat-4 { background: var(--signal); }
.heat-hot { background: var(--hot); }

/* sheet / drawer scrim */
.scrim { background: color-mix(in oklab, #000 45%, transparent); backdrop-filter: blur(2px); }