/* ============================================================
   Horse E.T. — base tokens + primitives
   Identity "Field & Flight": deep forest sidebar (the white horse
   mark lives on it), crisp light workspace, olive-green brand
   accent (#708e41, from horse-et.com) + sky-blue for flight states.
   Voice: Sora (headings) · Inter (body) · JetBrains Mono (refs).
   ============================================================ */
:root {
  /* Brand */
  --green:        #6f8f3f;   /* Horse E.T. olive */
  --green-deep:   #57722f;
  --green-bright: #8fb255;   /* on dark surfaces */
  --green-soft:   #eef3e1;   /* light tint */
  --sky:          #3f73a5;   /* secondary — flight/in-transit */
  --sky-soft:     #e7eff6;

  /* Workspace neutrals (cool green-grey, NOT beige) */
  --paper:     #f5f7f2;
  --surface:   #ffffff;
  --surface-2: #eef1ea;
  --ink:       #19211b;
  --ink-soft:  #3c473d;
  --muted:     #6e7a6e;
  --muted-2:   #94a094;
  --line:      #e3e7dd;
  --line-soft: #edf0e8;

  /* Dark sidebar */
  --nav-bg-1:  #17211a;
  --nav-bg-2:  #0f170f;
  --nav-text:  #9aa79b;
  --nav-dim:   #6b776c;

  /* Status */
  --ok:    #5a8a2f;
  --info:  #3f73a5;
  --warn:  #b5862a;
  --bad:   #bd4631;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;

  --sh-1: 0 1px 2px rgba(20,30,22,.05), 0 1px 3px rgba(20,30,22,.04);
  --sh-2: 0 2px 6px rgba(20,30,22,.06), 0 10px 24px -14px rgba(20,30,22,.14);
  --sh-3: 0 24px 60px -30px rgba(20,30,22,.30);
  --ring: 0 0 0 3px rgba(111,143,63,.20);

  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --sidebar-w: 254px;
}

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: var(--ink); min-height: 100dvh; }
::selection { background: var(--green); color: #fff; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }

/* Type helpers */
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.eyebrow { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--green-deep); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .62rem 1.1rem; font-family: var(--font-body); font-size: .86rem; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
  transition: background .16s, color .16s, border-color .16s, box-shadow .16s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: var(--green-deep); border-color: var(--green-deep); box-shadow: var(--sh-2); }
.btn-ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: #d6dccd; }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover { background: #283228; }
.btn-sm { padding: .4rem .8rem; font-size: .78rem; border-radius: 7px; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); }

/* Forms */
.field { display: block; margin-bottom: 1rem; }
.label { display: block; font-size: .76rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem; }
.input, select.input, textarea.input {
  width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .66rem .85rem; font-family: var(--font-body); font-size: .92rem; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.input::placeholder { color: var(--muted-2); }
.input:focus { outline: none; border-color: var(--green); box-shadow: var(--ring); }
textarea.input { resize: vertical; min-height: 92px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 11px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--paper); }
.table .t-strong { color: var(--ink); font-weight: 600; }

/* Status pills */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok   { background: var(--green-soft); color: var(--green-deep); }
.pill-info { background: var(--sky-soft);   color: var(--sky); }
.pill-warn { background: #f6efdc;           color: var(--warn); }
.pill-bad  { background: #f8e4df;           color: var(--bad); }

/* Empty state */
.empty { border: 1px dashed var(--line); border-radius: var(--r); padding: 46px 26px; text-align: center; background: var(--surface); }
.empty h3 { font-size: 1.2rem; margin-bottom: 6px; }
.empty p { color: var(--muted); }