@font-face {
  font-family: 'Geist';
  src: url('/admin/static/fonts/geist/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/admin/static/fonts/geist/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Trellis Design System — Colors & Type
   Dark-first operator console. Zinc neutrals. Teal accent.
   ============================================================ */

:root {
  /* ========== Brand ========== */
  --brand-teal:        #128D8B;   /* primary logo color */
  --brand-teal-hover:  #14A3A1;
  --brand-teal-press:  #0F7876;
  --brand-teal-tint:   rgba(18, 141, 139, 0.12);
  --brand-teal-ring:   rgba(18, 141, 139, 0.45);

  /* ========== Neutral scale (Zinc, true neutral — no blue tint) ========== */
  --zinc-50:   #fafafa;
  --zinc-100:  #f4f4f5;
  --zinc-200:  #e4e4e7;
  --zinc-300:  #d4d4d8;
  --zinc-400:  #a1a1aa;
  --zinc-500:  #71717a;
  --zinc-600:  #52525b;
  --zinc-700:  #3f3f46;
  --zinc-800:  #27272a;
  --zinc-850:  #1f1f22;  /* custom step for panel fills */
  --zinc-900:  #18181b;
  --zinc-950:  #09090b;

  /* ========== Semantic — Dark (default) ========== */
  --bg-base:       var(--zinc-950);   /* canvas */
  --bg-surface:    var(--zinc-900);   /* cards, panels */
  --bg-surface-2:  var(--zinc-850);   /* nested panels, inputs */
  --bg-surface-3:  var(--zinc-800);   /* hover surface, raised */
  --bg-overlay:    rgba(9, 9, 11, 0.72);

  --fg-1:          var(--zinc-50);    /* primary text */
  --fg-2:          var(--zinc-300);   /* secondary text */
  --fg-3:          var(--zinc-400);   /* tertiary / labels */
  --fg-4:          var(--zinc-500);   /* muted / disabled */
  --fg-inverse:    var(--zinc-950);

  --border-1:      var(--zinc-800);   /* hairline dividers */
  --border-2:      var(--zinc-700);   /* component borders */
  --border-strong: var(--zinc-600);   /* inputs on focus-visible */

  /* Theme-flippable chrome */
  --scrollbar-thumb:       var(--zinc-800);
  --scrollbar-thumb-hover: var(--zinc-700);
  --noise-dot:             rgba(255, 255, 255, 0.04);

  --accent:        var(--brand-teal);
  --accent-hover:  var(--brand-teal-hover);
  --accent-press:  var(--brand-teal-press);
  --accent-fg:     #ffffff;
  --accent-tint:   var(--brand-teal-tint);
  --accent-ring:   var(--brand-teal-ring);
  --accent-tag-fg: #5EEAE8;   /* readable teal text on tint — bright in dark, flipped darker in light */

  /* ========== Status / Signal (reserved for semantic meaning only) ========== */
  --status-success:       #22c55e;
  --status-success-tint:  rgba(34, 197, 94, 0.12);
  --status-success-fg:    #4ade80;

  --status-warning:       #f59e0b;
  --status-warning-tint:  rgba(245, 158, 11, 0.12);
  --status-warning-fg:    #fbbf24;

  --status-danger:        #ef4444;
  --status-danger-tint:   rgba(239, 68, 68, 0.12);
  --status-danger-fg:     #f87171;

  --status-info:          #3b82f6;
  --status-info-tint:     rgba(59, 130, 246, 0.12);
  --status-info-fg:       #60a5fa;

  --status-neutral:       var(--zinc-500);
  --status-neutral-tint:  rgba(113, 113, 122, 0.14);
  --status-neutral-fg:    var(--zinc-300);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent-ring);

  /* ========== Typography ========== */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  /* Type scale — tight, utilitarian. No display sizes. */
  --text-xs:   11px;   /* micro labels, timestamps */
  --text-sm:   12px;   /* table cells, meta */
  --text-base: 13px;   /* body default */
  --text-md:   14px;   /* primary body in forms */
  --text-lg:   16px;   /* section headings */
  --text-xl:   20px;   /* page headings */
  --text-2xl:  24px;   /* dashboard H1 */
  --text-3xl:  30px;   /* rare — empty-state hero */

  /* Line heights */
  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.55;

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.06em;  /* uppercase labels */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

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

  /* ========== Radii ========== */
  --radius-none: 0;
  --radius-sm:   3px;   /* badges, pills */
  --radius-md:   6px;   /* buttons, inputs */
  --radius-lg:   8px;   /* cards */
  --radius-xl:   12px;  /* large panels */
  --radius-full: 9999px;

  /* ========== Elevation (mostly borders, minimal shadow) ========== */
  --shadow-none: none;
  --shadow-xs:   0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 0 0 1px var(--border-1);

  /* ========== Motion ========== */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Light theme (not default) ---------- */
[data-theme="light"] {
  --bg-base:       #ffffff;
  --bg-surface:    var(--zinc-50);
  --bg-surface-2:  var(--zinc-100);
  --bg-surface-3:  var(--zinc-200);
  --bg-overlay:    rgba(255, 255, 255, 0.8);

  --fg-1:          var(--zinc-950);
  --fg-2:          var(--zinc-700);
  --fg-3:          var(--zinc-500);
  --fg-4:          var(--zinc-400);
  --fg-inverse:    #ffffff;

  --border-1:      var(--zinc-200);
  --border-2:      var(--zinc-300);
  --border-strong: var(--zinc-400);

  --scrollbar-thumb:       var(--zinc-300);
  --scrollbar-thumb-hover: var(--zinc-400);
  --noise-dot:             rgba(0, 0, 0, 0.05);

  --accent-fg:     #ffffff;
  --accent-tint:   rgba(18, 141, 139, 0.1);
  --accent-tag-fg: #0F7876;   /* darker teal for light-mode readability */

  --status-success-fg: #15803d;
  --status-warning-fg: #b45309;
  --status-danger-fg:  #b91c1c;
  --status-info-fg:    #1d4ed8;
  --status-neutral-fg: var(--zinc-600);

  --shadow-xs:   0 1px 0 rgba(16, 24, 40, 0.05);
  --shadow-sm:   0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md:   0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg:   0 12px 32px rgba(16, 24, 40, 0.1);
}

/* ========================================================
   Semantic element styles
   ======================================================== */

html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg-1);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
}

body {
  margin: 0;
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-base);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--fg-1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
h5 { font-size: var(--text-base); font-weight: var(--weight-medium); }
h6 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}

p {
  margin: 0;
  color: var(--fg-2);
  line-height: var(--leading-normal);
}

small { font-size: var(--text-xs); color: var(--fg-3); }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-feature-settings: "zero", "ss02";
}

code {
  color: var(--fg-1);
  background: var(--bg-surface-2);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-1);
}

pre {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  color: var(--fg-2);
  overflow-x: auto;
  line-height: var(--leading-snug);
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-6) 0;
}

/* Uppercase micro-label used across the console */
.label-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}

/* Selection */
::selection {
  background: var(--accent-tint);
  color: var(--fg-1);
}

/* Scrollbar (webkit) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-base);
}
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }