@import "tailwindcss";

@theme {
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Menlo", monospace;

  --color-bg: oklch(0.135 0.005 240);
  --color-elev: oklch(0.175 0.006 240);
  --color-elev-2: oklch(0.215 0.006 240);
  --color-line: oklch(0.275 0.008 240);
  --color-line-soft: oklch(0.225 0.006 240);
  --color-fg: oklch(0.96 0.003 240);
  --color-fg-muted: oklch(0.68 0.012 240);
  --color-fg-faint: oklch(0.52 0.012 240);
  --color-accent: oklch(0.78 0.17 145);
  --color-accent-soft: oklch(0.36 0.07 145);
  --color-warn: oklch(0.82 0.15 80);
  --color-warn-soft: oklch(0.38 0.06 80);
  --color-danger: oklch(0.68 0.21 25);
  --color-danger-soft: oklch(0.34 0.08 25);
}

@layer base {
  html {
    background: var(--color-bg);
    color: var(--color-fg);
    font-feature-settings: "ss01", "cv11";
  }

  body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background: oklch(0.4 0.12 145 / 0.4);
  }

  table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }
}

@layer components {
  .mono { font-family: var(--font-mono); font-feature-settings: "zero", "ss01"; }
  .num  { font-variant-numeric: tabular-nums; }

  .chip {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--color-line);
    border-radius: 2px;
    color: var(--color-fg-muted);
    line-height: 1.4;
  }
  .chip-dot {
    width: 0.375rem; height: 0.375rem; border-radius: 999px;
    background: var(--color-fg-faint);
    box-shadow: 0 0 0 1px oklch(from var(--color-fg-faint) l c h / 0.3);
  }
  .chip-ok      { color: var(--color-accent); border-color: var(--color-accent-soft); }
  .chip-ok .chip-dot      { background: var(--color-accent); box-shadow: 0 0 8px oklch(from var(--color-accent) l c h / 0.6); }
  .chip-warn    { color: var(--color-warn);   border-color: var(--color-warn-soft); }
  .chip-warn .chip-dot    { background: var(--color-warn);   box-shadow: 0 0 8px oklch(from var(--color-warn) l c h / 0.6); }
  .chip-danger  { color: var(--color-danger); border-color: var(--color-danger-soft); }
  .chip-danger .chip-dot  { background: var(--color-danger); box-shadow: 0 0 8px oklch(from var(--color-danger) l c h / 0.6); }

  .field {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    color: var(--color-fg);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.35;
    transition: border-color 120ms ease, background-color 120ms ease;
  }
  .field::placeholder { color: var(--color-fg-faint); }
  .field:focus {
    outline: none;
    border-color: var(--color-accent);
    background: oklch(from var(--color-bg) calc(l + 0.02) c h);
  }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: 1px solid var(--color-accent);
    background: var(--color-accent);
    color: oklch(0.12 0.02 145);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease, transform 120ms ease;
  }
  .btn:hover { filter: brightness(1.08); }
  .btn:active { transform: translateY(1px); }
  .btn-ghost {
    background: transparent;
    color: var(--color-fg-muted);
    border-color: var(--color-line);
  }
  .btn-ghost:hover { color: var(--color-fg); border-color: var(--color-fg-faint); }

  .tf-active {
    color: var(--color-accent);
    border-color: var(--color-accent-soft);
    background: oklch(from var(--color-accent) calc(l - 0.55) c h / 0.25);
  }

  .surface {
    background: var(--color-elev);
    border: 1px solid var(--color-line);
    border-radius: 6px;
  }

  .hgroup-title {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.6875rem;
    color: var(--color-fg-faint);
  }

  .grid-bg {
    background-image:
      linear-gradient(to right, oklch(from var(--color-line) l c h / 0.35) 1px, transparent 1px),
      linear-gradient(to bottom, oklch(from var(--color-line) l c h / 0.35) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: -1px -1px;
  }

  .flash {
    border-left: 2px solid var(--color-accent);
    background: oklch(from var(--color-accent) calc(l - 0.6) c h / 0.18);
    color: var(--color-fg);
    padding: 0.625rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    border-radius: 0 4px 4px 0;
  }
  .flash-alert {
    border-left-color: var(--color-danger);
    background: oklch(from var(--color-danger) calc(l - 0.5) c h / 0.18);
  }

  /* Segmented data-freshness indicator — one boxed unit, three TF zones. */
  .freshbar {
    display: inline-flex;
    border: 1px solid var(--color-line);
    border-radius: 3px;
    overflow: hidden;
  }
  .freshbar-zone {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
    padding: 0.1875rem 0.5rem;
    border-right: 1px solid var(--color-line);
    color: var(--color-fg-faint);
  }
  .freshbar-zone:last-child { border-right: 0; }
  .freshbar-ok {
    background: oklch(from var(--color-accent) calc(l - 0.5) c h / 0.3);
    color: var(--color-accent);
  }
  .freshbar-warn {
    background: oklch(from var(--color-warn) calc(l - 0.5) c h / 0.3);
    color: var(--color-warn);
  }
  .freshbar-stale {
    background: oklch(from var(--color-danger) calc(l - 0.45) c h / 0.3);
    color: var(--color-danger);
  }
  .freshbar-none {
    background: transparent;
    color: var(--color-fg-faint);
  }
}