/* ============================================================
   Agime AI — Colors & Type
   Inspired by NVIDIA Brev developer console aesthetic:
   deep black canvas, signature NVIDIA green accent (#76B900),
   mono + clean sans typography for a technical, AI-infra feel.
   ============================================================ */

/* No remote font import, on purpose.
   An @import inside a stylesheet is render-blocking AND serialised: the browser
   must fetch this file before it can even discover the font request, then wait
   on fonts.googleapis.com and fonts.gstatic.com in turn. That is three extra
   round trips in front of first paint, on a page whose visitors arrive on
   conference wifi — and a single point of failure on a network that blocks or
   throttles Google. The stacks below start with Inter and JetBrains Mono, so a
   machine that has them installed still gets them; everything else falls
   through to the platform UI font, which costs nothing and never fails. */

:root {
  /* ---------- BRAND ---------- */
  --brand-green:        #76B900;   /* NVIDIA signature green — primary accent */
  --brand-green-hover:  #8FD300;   /* lighter on hover */
  --brand-green-press:  #5C9200;   /* darker on press */
  --brand-green-soft:   rgba(118, 185, 0, 0.12); /* subtle fill */
  --brand-green-glow:   rgba(118, 185, 0, 0.35); /* glow / halo */

  /* ---------- SURFACES (dark primary) ---------- */
  --bg-0:  #000000;   /* pure black — page canvas */
  --bg-1:  #0A0A0A;   /* near-black — outermost shell */
  --bg-2:  #111111;   /* card / panel background */
  --bg-3:  #1A1A1A;   /* raised element, input field */
  --bg-4:  #242424;   /* hover on bg-3, active row */
  --bg-5:  #2E2E2E;   /* borders-as-surface, disabled chips */

  /* ---------- BORDERS / DIVIDERS ---------- */
  --border-subtle: #1F1F1F;
  --border-default: #2A2A2A;
  --border-strong: #3A3A3A;
  --border-focus: var(--brand-green);

  /* ---------- FOREGROUND (text + icon) ---------- */
  --fg-1: #F5F5F5;   /* primary text, headings */
  --fg-2: #B8B8B8;   /* secondary text, body muted */
  --fg-3: #7A7A7A;   /* tertiary, captions, timestamps */
  --fg-4: #4D4D4D;   /* disabled / placeholder */
  --fg-on-green: #0A0A0A; /* text on green surfaces — near-black for contrast */

  /* ---------- SEMANTIC ---------- */
  --success: #76B900;  /* reuse brand green */
  --success-soft: rgba(118, 185, 0, 0.15);
  --warning: #FFB020;
  --warning-soft: rgba(255, 176, 32, 0.12);
  --danger:  #FF4D4F;
  --danger-soft: rgba(255, 77, 79, 0.12);
  --info:    #4DA3FF;
  --info-soft: rgba(77, 163, 255, 0.12);

  /* ---------- GPU STATUS (domain-specific) ---------- */
  --gpu-running: var(--brand-green);
  --gpu-stopped: var(--fg-3);
  --gpu-pending: var(--warning);
  --gpu-error:   var(--danger);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --fs-display: 56px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 18px;
  --fs-body: 14px;
  --fs-body-lg: 16px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

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

  /* Letter-spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-eyebrow: 0.12em;

  /* ---------- SPACING (4pt) ---------- */
  --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;
  --sp-20: 80px;

  /* ---------- RADII ---------- */
  --r-xs: 0px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-pill: 0px;

  /* ---------- SHADOWS / GLOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --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 1px 0 rgba(255, 255, 255, 0.04);
  --glow-green: 0 0 0 1px var(--brand-green), 0 0 24px var(--brand-green-glow);
  --glow-green-soft: 0 0 16px var(--brand-green-glow);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-normal: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   ============================================================ */

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-green);
}

.code {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-default);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  color: var(--fg-2);
}