/* ─────────────────────────────────────────────────────────────────────────
 * SEOS design tokens — single source of truth for color, spacing, type,
 * radius, shadow, and component primitives across every SEOS app.
 *
 * Drop this file into any sibling app and reference the variables:
 *   <link rel="stylesheet" href="/seos-tokens.css">
 *   <div class="seos-card"><button class="seos-btn seos-btn-p">…</button></div>
 *
 * Every class is prefixed `seos-` so it can't collide with the host app.
 * The plain CSS variables (`--seos-*`) work everywhere — Tailwind, vanilla,
 * styled-components, etc.
 * ──────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Surface (neutral, light theme) ────────────────────────────────── */
  --seos-bg:        #eef0f3;   /* page background */
  --seos-panel:     #ffffff;   /* cards, modals, inputs */
  --seos-topbar:    #fafbfc;   /* sticky header strip */
  --seos-box:       #e7ebef;   /* table row divider · subtle fill */
  --seos-box2:      #dde3e9;   /* hover/active fill on subtle fills */
  --seos-line:      #c5ccd4;   /* primary border */
  --seos-line2:     #d4dbe6;   /* secondary, lighter border */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --seos-text:      #2b3038;   /* body */
  --seos-mut:       #7c8694;   /* secondary text */
  --seos-dim:       #9aa3ad;   /* tertiary / placeholder */

  /* ── Brand / accent ────────────────────────────────────────────────── */
  --seos-acc:       #3b6cf6;   /* primary action · links · focus ring */
  --seos-acc2:      #6b4df6;   /* secondary brand · gradient stop */
  --seos-acc-soft:  #eef3ff;   /* accent-tinted background (chip, route) */
  --seos-acc-line:  #bcd0ff;   /* accent-tinted border */

  /* ── Status ────────────────────────────────────────────────────────── */
  --seos-ok:        #1f9d57;   /* success text */
  --seos-warn:      #c98a16;   /* warning text */
  --seos-bad:       #d23b3b;   /* danger text */
  --seos-ok-bg:     #eaf7ef;   /* success badge bg */
  --seos-warn-bg:   #fff3da;   /* warning badge bg */
  --seos-bad-bg:    #fde8e8;   /* danger badge bg */
  --seos-mut-bg:    #eef1f5;   /* muted badge bg */

  /* ── Dark navigation sidebar ───────────────────────────────────────── */
  --seos-navbg:     #171b22;
  --seos-navtext:   #aeb8c6;
  --seos-navmut:    #5d6776;
  --seos-navitem-hover: #222a35;

  /* ── Typography ────────────────────────────────────────────────────── */
  --seos-font-sans: var(--font-geist-sans), 'Segoe UI', system-ui, -apple-system, sans-serif;
  --seos-font-mono: var(--font-geist-mono), ui-monospace, 'SF Mono', Consolas, monospace;
  --seos-fs-xs:   10.5px;
  --seos-fs-sm:   11.5px;
  --seos-fs-base: 12.5px;
  --seos-fs-md:   13px;
  --seos-fs-lg:   15px;
  --seos-fs-xl:   18px;
  --seos-fs-2xl:  21px;
  --seos-letter:  0.1px;        /* body letter-spacing */
  --seos-eyebrow: 0.05em;       /* table heads, lab2 */

  /* ── Radius ────────────────────────────────────────────────────────── */
  --seos-r-sm:  6px;            /* badges, route pill */
  --seos-r-md:  7px;            /* btn, input */
  --seos-r-lg:  8px;            /* navitem */
  --seos-r-xl:  12px;           /* card */
  --seos-r-pill: 20px;          /* chip */

  /* ── Spacing scale (informational; use Tailwind/your scale if preferred) */
  --seos-sp-1: 4px;
  --seos-sp-2: 8px;
  --seos-sp-3: 12px;
  --seos-sp-4: 16px;
  --seos-sp-5: 20px;
  --seos-sp-6: 24px;

  /* ── Elevation ─────────────────────────────────────────────────────── */
  --seos-shadow-sm: 0 1px 2px rgba(20,28,48,.05);
  --seos-shadow-md: 0 4px 14px rgba(20,28,48,.08);
  --seos-shadow-lg: 0 14px 38px rgba(20,28,48,.12);

  /* ── Motion ────────────────────────────────────────────────────────── */
  --seos-dur-fast: 120ms;
  --seos-dur-base: 180ms;
  --seos-ease: cubic-bezier(.4, 0, .2, 1);

  /* ── Z-index ───────────────────────────────────────────────────────── */
  --seos-z-nav:    10;
  --seos-z-modal:  50;
  --seos-z-toast:  60;
}

/* ─── Component primitives ────────────────────────────────────────────── */

.seos-base {
  font-family: var(--seos-font-sans);
  font-size: var(--seos-fs-md);
  letter-spacing: var(--seos-letter);
  color: var(--seos-text);
  background: var(--seos-bg);
}

.seos-mono { font-family: var(--seos-font-mono); }

/* Card / surface */
.seos-card {
  background: var(--seos-panel);
  border: 1px solid var(--seos-line);
  border-radius: var(--seos-r-xl);
}
.seos-card-shadow { box-shadow: var(--seos-shadow-md); }

/* Input */
.seos-inp {
  width: 100%;
  background: #fff;
  border: 1px solid var(--seos-line);
  color: var(--seos-text);
  border-radius: var(--seos-r-md);
  padding: 8px 10px;
  font-size: var(--seos-fs-md);
  font-family: var(--seos-font-sans);
}
.seos-inp::placeholder { color: var(--seos-dim); }
.seos-inp:focus { outline: none; border-color: var(--seos-acc); }

/* Button */
.seos-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--seos-line);
  background: #fff;
  color: var(--seos-text);
  border-radius: var(--seos-r-md);
  padding: 7px 12px;
  font-size: var(--seos-fs-base);
  font-family: var(--seos-font-sans);
  cursor: pointer;
  transition: border-color var(--seos-dur-fast) var(--seos-ease),
              color var(--seos-dur-fast) var(--seos-ease);
}
.seos-btn:hover { border-color: var(--seos-acc); color: var(--seos-acc); }
.seos-btn:disabled { opacity: .5; cursor: not-allowed; }

.seos-btn-p {
  background: var(--seos-acc); border-color: var(--seos-acc); color: #fff;
}
.seos-btn-p:hover { filter: brightness(1.05); color: #fff; }

.seos-btn-danger {
  background: var(--seos-bad); border-color: var(--seos-bad); color: #fff;
}
.seos-btn-danger:hover { filter: brightness(1.05); color: #fff; }

/* Chip (filter / toggle) */
.seos-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--seos-line);
  border-radius: var(--seos-r-pill);
  padding: 4px 11px;
  font-size: var(--seos-fs-sm);
  background: #fff;
  color: var(--seos-mut);
  cursor: pointer;
}
.seos-chip.on {
  background: var(--seos-acc-soft);
  border-color: var(--seos-acc-line);
  color: var(--seos-acc);
}

/* Badge (status pill) */
.seos-badge {
  font-size: var(--seos-fs-xs);
  padding: 3px 8px;
  border-radius: var(--seos-r-sm);
  display: inline-block;
  font-family: var(--seos-font-mono);
}
.seos-b-ok   { background: var(--seos-ok-bg);   color: #1f7a44; }
.seos-b-warn { background: var(--seos-warn-bg); color: #9a6b00; }
.seos-b-bad  { background: var(--seos-bad-bg);  color: #c0392b; }
.seos-b-mut  { background: var(--seos-mut-bg);  color: var(--seos-mut); }

/* Route / API pill (mono accent) */
.seos-route {
  font-family: var(--seos-font-mono);
  font-size: var(--seos-fs-xs);
  border: 1px solid var(--seos-acc-line);
  background: var(--seos-acc-soft);
  color: var(--seos-acc);
  padding: 4px 9px;
  border-radius: var(--seos-r-sm);
}

/* Eyebrow label (uppercase tiny header) */
.seos-eyebrow {
  font-size: var(--seos-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--seos-mut);
  font-weight: 600;
}

/* Page title scale */
.seos-h1 { font-size: var(--seos-fs-2xl); font-weight: 600; margin: 0; }
.seos-h2 { font-size: var(--seos-fs-xl);  font-weight: 600; margin: 0; }
.seos-sub { font-size: var(--seos-fs-md); color: var(--seos-mut); margin: 0; }

/* Table */
.seos-table { width: 100%; border-collapse: collapse; font-size: var(--seos-fs-base); }
.seos-table th {
  text-align: left;
  color: var(--seos-mut);
  font-weight: 600;
  font-size: var(--seos-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--seos-eyebrow);
  padding: 8px 6px;
  border-bottom: 1px solid var(--seos-line);
}
.seos-table td {
  padding: 9px 6px;
  border-bottom: 1px solid var(--seos-box);
  color: var(--seos-text);
}

/* Dark sidebar nav (optional — match Kody portal) */
.seos-nav { background: var(--seos-navbg); color: var(--seos-navtext); }
.seos-navitem {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--seos-r-lg);
  color: var(--seos-navtext);
  font-size: var(--seos-fs-base);
  border-left: 3px solid transparent;
  text-decoration: none;
}
.seos-navitem:hover { background: var(--seos-navitem-hover); color: #fff; }
.seos-navitem.on {
  background: var(--seos-navitem-hover);
  color: #fff;
  border-left-color: var(--seos-acc);
}

/* Scrollbars (subtle, light theme) */
.seos-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.seos-scroll::-webkit-scrollbar-thumb { background: #c7ced6; border-radius: 8px; }
.seos-nav-scroll {
  scrollbar-width: thin;
  scrollbar-color: #3a4250 transparent;
}
.seos-nav-scroll::-webkit-scrollbar { width: 7px; }
.seos-nav-scroll::-webkit-scrollbar-thumb {
  background: #333b47; border-radius: 8px;
}
.seos-nav-scroll::-webkit-scrollbar-thumb:hover { background: #454e5c; }