/* ============================================================
   AIGENT DESIGN SYSTEM — "Operator"
   Single source of truth. Tokens → base → components.
   Aesthetic bar: Linear / Vercel / Retool.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand blue — refined electric azure */
  --blue-50:  #eef3ff;
  --blue-100: #dce6ff;
  --blue-200: #b8ccff;
  --blue-300: #88a6ff;
  --blue-400: #5680ff;
  --blue-500: #1f5bff;   /* primary action */
  --blue-600: #1a4ddb;   /* hover */
  --blue-700: #1539a6;   /* pressed / deep text */

  /* Cool neutrals */
  --n-0:   #ffffff;
  --n-25:  #fbfbfc;      /* canvas */
  --n-50:  #f6f7f9;
  --n-100: #eef0f3;
  --n-150: #e6e8ec;      /* hairline */
  --n-200: #dadde2;      /* border */
  --n-300: #c2c7d0;
  --n-400: #9aa1ad;
  --n-500: #6b7280;      /* muted */
  --n-600: #4b5563;
  --n-700: #353b45;      /* labels */
  --n-800: #1f242b;
  --n-900: #0e1116;      /* ink */
  --n-950: #08090c;

  /* Real-time / liveness — reserved for live status only */
  --live: #00b8d4;
  --live-glow: rgba(0,184,212,0.55);

  /* Mascot accents (brand IP palette) */
  --accent-violet: #7b61ff;
  --accent-cyan:   #19c3d6;

  /* Semantic */
  --danger:       #e5484d;
  --danger-tint:  #fef1f1;
  --success:      #30a46c;
  --success-tint: #ecf8f1;
  --warning:      #e0901b;
  --warning-tint: #fdf4e6;

  /* Roles */
  --brand: var(--blue-500);
  --brand-press: var(--blue-600);
  --brand-tint: var(--blue-50);
  --page: var(--n-25);
  --surface: var(--n-0);
  --ink: var(--n-900);
  --label: var(--n-700);
  --muted: var(--n-500);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --hairline: var(--n-150);

  /* Deep canvas (brand panels / dark surfaces) */
  --ink-panel: #070b18;

  /* Dark chrome (unified app sidebar + topbar) */
  --chrome: #0f172a;            /* sidebar + topbar — single dark base */
  --chrome-elevated: #1e293b;   /* table header, raised dark */
  --chrome-line: rgba(255,255,255,0.08);
  --chrome-divider: rgba(255,255,255,0.11);
  --chrome-text: #e8edf5;
  --chrome-muted: #93a1b8;      /* inactive nav / secondary */
  --chrome-hover: rgba(255,255,255,0.06);

  /* Type */
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-wordmark: "Poppins", system-ui, sans-serif;

  --fs-display: 32px;
  --fs-h1: 24px;
  --fs-h2: 19px;
  --fs-h3: 15.5px;
  --fs-body: 14.5px;
  --fs-sm: 13px;
  --fs-cap: 12px;
  --fs-micro: 11px;

  /* Spacing (4-base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radius — tighter, app-grade */
  --r-xs: 5px; --r-sm: 6px;  --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* Shadows — subtle, low */
  --sh-xs: 0 1px 2px rgba(16,19,30,0.04);
  --sh-sm: 0 1px 2px rgba(16,19,30,0.06), 0 1px 1px rgba(16,19,30,0.04);
  --sh-md: 0 4px 12px -2px rgba(16,19,30,0.08), 0 2px 4px -2px rgba(16,19,30,0.05);
  --sh-lg: 0 12px 32px -8px rgba(16,19,30,0.14), 0 4px 8px -4px rgba(16,19,30,0.06);
  --sh-menu: 0 8px 28px -6px rgba(16,19,30,0.16);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(31,91,255,0.18);
  --ring-danger: 0 0 0 3px rgba(229,72,77,0.18);

  /* Control sizing */
  --control-h: 44px;
  --control-h-lg: 48px;
  --dur: .15s;
}

/* ---------- 2. BASE ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--page);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--font-display); color: var(--ink); margin: 0; letter-spacing: -0.015em; font-weight: 600; }
a { color: var(--brand); }

.ds-display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); letter-spacing: -0.02em; line-height: 1.1; }
.ds-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); letter-spacing: -0.015em; }
.ds-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); }
.ds-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); }
.ds-body { font-size: var(--fs-body); }
.ds-sm { font-size: var(--fs-sm); }
.ds-cap { font-size: var(--fs-cap); }
.ds-mono { font-family: var(--font-mono); }
.text-muted { color: var(--muted); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}

/* ---------- 3. APP SHELL ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

/* refined white app bar (for product screens) */
.app-header {
  flex: 0 0 auto;
  background: var(--surface);
  height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-bottom: 1px solid var(--hairline);
}
.wordmark {
  font-family: var(--font-wordmark);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  user-select: none;
  line-height: 1;
}
.wordmark.lg { font-size: 30px; }
.wordmark b { font-weight: 700; }
.wordmark span { font-weight: 500; opacity: 0.96; }

.app-footer {
  flex: 0 0 auto;
  padding: 18px 24px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.app-footer .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--n-300); }
.app-footer a { color: var(--muted); text-decoration: none; font-weight: 500; border-radius: 5px; }
.app-footer a:hover { color: var(--ink); }
.app-footer a:focus-visible { outline: none; box-shadow: var(--ring); color: var(--ink); }

/* ---------- 4. CARD ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

/* ---------- 5. FIELDS ---------- */
.field { margin-bottom: var(--sp-4); }
.field-label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--label);
  margin-bottom: 6px;
}
.control { position: relative; }

.input {
  width: 100%;
  height: var(--control-h);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 0 13px;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur), box-shadow var(--dur);
  box-shadow: var(--sh-xs);
}
.input::placeholder { color: var(--n-400); }
.input:hover { border-color: var(--border-strong); }
.input:focus { border-color: var(--brand); box-shadow: var(--ring); }
.has-trailing .input { padding-right: 44px; }
.has-leading .input { padding-left: 40px; }
.leading-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--n-400); display: flex; pointer-events: none; }

textarea.input { height: auto; min-height: 92px; padding: 11px 13px; resize: vertical; line-height: 1.55; }

.field.invalid .input { border-color: var(--danger); background: var(--danger-tint); }
.field.invalid .input:focus { box-shadow: var(--ring-danger); }

.error-msg {
  display: flex; align-items: center; gap: 6px;
  color: var(--danger); font-size: var(--fs-cap); font-weight: 600; margin-top: 6px;
}
.helper-msg { color: var(--muted); font-size: var(--fs-cap); margin-top: 6px; }

.trailing-btn {
  position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--muted);
  border-radius: var(--r-sm); cursor: pointer; padding: 0;
  transition: color .12s, background .12s, box-shadow .12s;
}
.trailing-btn:hover { color: var(--ink); background: var(--n-100); }
.trailing-btn:focus-visible { outline: none; box-shadow: var(--ring); color: var(--brand); }

/* ---------- 6. SELECT / COMBOBOX ---------- */
.menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--sh-menu);
  padding: 5px; max-height: 232px; overflow-y: auto; z-index: 20;
}
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: var(--r-sm);
  font-size: var(--fs-body); color: var(--ink); cursor: pointer;
}
.menu-item .sub { color: var(--muted); font-size: var(--fs-cap); }
.menu-item:hover, .menu-item.active { background: var(--brand-tint); }
.menu-item .check { color: var(--brand); display: flex; }
.menu-empty { padding: 14px 11px; color: var(--muted); font-size: var(--fs-sm); text-align: center; }

/* ---------- 7. CHECKBOX ---------- */
.checkbox { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: var(--fs-sm); color: var(--label); }
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox .box {
  width: 18px; height: 18px; border-radius: var(--r-xs);
  border: 1.5px solid var(--border-strong); background: var(--surface);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.checkbox input:checked + .box { background: var(--brand); border-color: var(--brand); }
.checkbox input:focus-visible + .box { box-shadow: var(--ring); }
.checkbox .box svg { opacity: 0; transition: opacity .1s; }
.checkbox input:checked + .box svg { opacity: 1; }

/* ---------- 8. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-h); padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; white-space: nowrap; letter-spacing: -0.005em;
  transition: background var(--dur), border-color var(--dur), color var(--dur), box-shadow var(--dur), transform .05s;
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled { cursor: default; opacity: .55; }
.btn-lg { height: var(--control-h-lg); font-size: var(--fs-h3); padding: 0 20px; }
.btn-block { width: 100%; }

.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(31,91,255,.24), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-primary:hover { background: var(--brand-press); }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.btn-primary:disabled { opacity: .9; }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border); box-shadow: var(--sh-xs); }
.btn-secondary:hover { border-color: var(--border-strong); background: var(--n-50); }
.btn-secondary:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-ghost { background: transparent; color: var(--n-700); }
.btn-ghost:hover { background: var(--n-100); color: var(--ink); }
.btn-ghost:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.94); }
.btn-danger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger); }

/* ---------- 9. LINK ---------- */
.link { color: var(--brand); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; border-radius: 5px; padding: 1px 2px; }
.link:hover { text-decoration: underline; text-underline-offset: 2px; }
.link:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- 10. BADGE ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-cap); font-weight: 600; font-family: var(--font-sans);
  letter-spacing: .005em; white-space: nowrap;
}
.badge .dot-ind { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-blue { background: var(--brand-tint); color: var(--blue-700); }
.badge-neutral { background: var(--n-100); color: var(--n-600); }
.badge-success { background: var(--success-tint); color: var(--success); }
.badge-danger { background: var(--danger-tint); color: var(--danger); }
.badge-warning { background: var(--warning-tint); color: var(--warning); }
.badge-live { background: rgba(0,184,212,.12); color: #0b8ca3; }

/* ---------- 11. SPINNER ---------- */
.spinner {
  width: 17px; height: 17px;
  border: 2.5px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: ds-spin .7s linear infinite;
}
.spinner-brand { border-color: var(--blue-100); border-top-color: var(--brand); }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ---------- 12. CARET ---------- */
.caret { color: var(--muted); }

/* ---------- 13. LIVE DOT (real-time) ---------- */
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: 0 0 auto; }
.live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--live); opacity: .6; animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.6s; }
  .live-dot::after { animation: none; opacity: .4; }
}