@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-canvas: 248 250 250;
  --color-sand: 242 244 244;
  --color-ink: 25 28 29;
  --color-moss: 13 94 103;
  --color-ember: 186 26 26;
  --color-line: 191 200 202;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: rgb(var(--color-canvas));
  color: rgb(var(--color-ink));
  font-family: var(--font-body), sans-serif;
}

input,
select,
textarea,
button {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: rgba(13, 94, 103, 0.18);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(111, 121, 122, 0.35);
  border-radius: 9999px;
}

@layer components {
  .ops-card {
    @apply rounded-lg border border-line/70 bg-white shadow-panel;
  }

  .ops-card-muted {
    @apply rounded-lg border border-line/70 bg-slate-50/70 shadow-panel;
  }

  .ops-card-dark {
    @apply rounded-lg border border-moss/80 bg-moss text-white shadow-panel;
  }

  .ops-section-head {
    @apply flex items-start justify-between gap-4 border-b border-line/70 px-6 py-4;
  }

  .ops-overline {
    @apply text-[11px] font-bold uppercase tracking-[0.08em] text-slate-500;
  }

  .ops-title {
    @apply text-[20px] font-semibold leading-7 text-ink;
  }

  .ops-copy {
    @apply text-[13px] leading-[18px] text-slate-500;
  }

  .ops-label {
    @apply mb-1.5 block text-[11px] font-bold uppercase tracking-[0.05em] text-slate-500;
  }

  .ops-input,
  .ops-select,
  .ops-textarea {
    @apply w-full rounded border border-line/80 bg-white px-3 py-2 text-[13px] text-ink outline-none transition focus:border-moss focus:ring-2 focus:ring-moss/15;
  }

  .ops-input:disabled,
  .ops-select:disabled,
  .ops-textarea:disabled {
    @apply cursor-not-allowed bg-slate-100 text-slate-500;
  }

  .ops-btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded border border-moss bg-moss px-4 py-2 text-[13px] font-semibold text-white transition hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-60;
  }

  .ops-btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded border border-line/80 bg-white px-4 py-2 text-[13px] font-semibold text-moss transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60;
  }

  .ops-btn-danger {
    @apply inline-flex items-center justify-center gap-2 rounded border border-red-200 bg-white px-4 py-2 text-[13px] font-semibold text-red-700 transition hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-60;
  }

  .ops-chip {
    @apply inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold;
  }

  .ops-chip-active {
    @apply ops-chip bg-emerald-100 text-emerald-700;
  }

  .ops-chip-warning {
    @apply ops-chip bg-amber-100 text-amber-700;
  }

  .ops-chip-danger {
    @apply ops-chip bg-red-100 text-red-700;
  }

  .ops-chip-muted {
    @apply ops-chip bg-slate-100 text-slate-600;
  }

  .ops-metric {
    @apply ops-card p-5;
  }

  .ops-table-shell {
    @apply ops-card overflow-hidden;
  }

  .ops-table {
    @apply min-w-full text-[13px];
  }

  .ops-table thead {
    @apply bg-slate-100/95 text-left text-slate-500;
  }

  .ops-table th {
    @apply px-6 py-3 text-[11px] font-bold uppercase tracking-[0.05em];
  }

  .ops-table td {
    @apply px-6 py-4 align-top text-[13px] text-ink;
  }

  .ops-table tbody tr {
    @apply border-t border-line/70;
  }

  .ops-note {
    @apply rounded-lg border border-blue-200 bg-blue-50 px-5 py-4 text-[13px] leading-6 text-slate-600;
  }
}
