/* ============================================================
   J-Bot OS — Design Tokens & Base Components
   Per: J-Bot OS Complete Design & Build Spec (May 2026)
   Single source of truth for shell + 23 app surfaces.
   ============================================================ */

:root {
  /* Tell the browser to render UA-styled controls (select dropdown panels,
     scrollbars, autofill, date/color pickers) with their dark variants.
     Without this, <select> popups render as native white panels on Windows
     even when our CSS styles the closed select dark. */
  color-scheme: dark;

  /* ---- Surfaces ---- */
  --bg-shell:     #0d1220;
  --bg-bar:       #080c18;
  --bg-win:       #101726;
  --bg-win-bar:   #0a1020;
  --bg-surface:   rgba(255, 255, 255, 0.025);
  --bg-hover:     rgba(55, 138, 221, 0.08);

  /* ---- Borders ---- */
  --border-default: rgba(60, 100, 180, 0.18);
  --border-subtle:  rgba(40,  70, 130, 0.18);
  --border-divider: rgba(50,  80, 140, 0.16);
  --border-bar:     rgba(50,  85, 160, 0.16);

  /* ---- Domain accents ---- */
  --accent-blue:       #6aaff0; /* Content / Business */
  --accent-purple:     #9b8ef5; /* Security */
  --accent-amber:      #f5c04a; /* Media / Warnings */
  --accent-green:      #3dd68c; /* Work / Success / Live */
  --accent-orange:     #f5a842; /* Trust / Pending */
  --accent-pink:       #e07aaa; /* Contacts */
  --accent-red:        #e05555; /* High risk / Errors */
  --accent-lavender:   #aba3f0; /* Learning */
  --accent-light-blue: #8ab8f0; /* Runtime / Utility */

  /* ---- Text ---- */
  --text-primary:   rgba(200, 218, 252, 0.90);
  --text-secondary: rgba(175, 198, 240, 0.82);
  --text-muted:     rgba(110, 138, 188, 0.65);
  --text-dim:       rgba(100, 128, 180, 0.55);
  --text-label:     rgba(100, 130, 182, 0.58);
  --text-title:     rgba(155, 180, 230, 0.60);

  /* ---- Sizing ---- */
  --taskbar-h:    42px;
  --winbar-h:     27px;
  --icon-tile-w:  58px;
  --icon-glyph:   38px;
  --start-w:      260px;
  --drawer-w:     156px;

  /* ---- Radii ---- */
  --radius-win:    9px;
  --radius-bar:    6px;
  --radius-row:    5px;
  --radius-btn:    5px;
  --radius-badge:  3px;
  --radius-pill:   12px;
  --radius-icon:   8px;

  /* ---- Typography ---- */
  --font-shell: "Inter", "Geist", "Segoe UI", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --fs-label:    9px;   /* shell labels, badges, code/mono */
  --fs-row:     10px;   /* row text, window titles */
  --fs-body:    11px;   /* generic body */
  --fs-heading: 12px;   /* app headings */
  --fw-medium:  500;
  --ls-label:   0.04em;

  /* ---- Effects ---- */
  --shadow-win:    0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-elev:   0 8px 22px rgba(0, 0, 0, 0.42);
  --shadow-tile:   0 1px 3px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   Domain accent classes — set --domain-accent for the room.
   Apply on the body or root element of an app HTML.
   ============================================================ */

.domain-security  { --domain-accent: var(--accent-purple); }
.domain-content   { --domain-accent: var(--accent-blue); }
.domain-media     { --domain-accent: var(--accent-amber); }
.domain-work      { --domain-accent: var(--accent-green); }
.domain-trust     { --domain-accent: var(--accent-orange); }
.domain-business  { --domain-accent: var(--accent-blue); }
.domain-contacts  { --domain-accent: var(--accent-pink); }
.domain-learning  { --domain-accent: var(--accent-lavender); }
.domain-runtime   { --domain-accent: var(--accent-light-blue); }
.domain-utility   { --domain-accent: var(--accent-light-blue); }

/* ============================================================
   Wallpaper + grid overlay (desktop background)
   ============================================================ */

.os-desktop-bg {
  background: var(--bg-shell);
}

.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(55, 138, 221, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 138, 221, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* ============================================================
   Window chrome
   ============================================================ */

.win {
  border-radius: var(--radius-win);
  border: 0.5px solid var(--border-default);
  background: var(--bg-win);
  box-shadow: var(--shadow-win);
  color: var(--text-primary);
  overflow: hidden;
}

.win-bar {
  height: var(--winbar-h);
  background: var(--bg-win-bar);
  border-bottom: 0.5px solid var(--border-bar);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  font-size: var(--fs-row);
  color: var(--text-title);
  font-weight: var(--fw-medium);
  user-select: none;
}

/* Traffic light dots — left of titlebar */
.dot-close,
.dot-min,
.dot-max {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot-close { background: #ff5f57; }
.dot-min   { background: #febc2e; }
.dot-max   { background: #28c840; }

/* ============================================================
   Rows + lists
   ============================================================ */

.row {
  padding: 4px 7px;
  border-radius: var(--radius-row);
  background: var(--bg-surface);
  font-size: var(--fs-row);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 80ms ease;
}
.row:hover { background: var(--bg-hover); }

/* ============================================================
   Status dots
   ============================================================ */

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-dim);
}
.status-dot.live  { background: var(--accent-green); }
.status-dot.warn  { background: var(--accent-amber); }
.status-dot.alert { background: var(--accent-red); }
.status-dot.idle  { background: var(--text-dim); }

/* ============================================================
   Badges
   ============================================================ */

.badge {
  font-size: var(--fs-label);
  padding: 1px 7px;
  border-radius: var(--radius-badge);
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}

/* ============================================================
   Buttons — five tiers
   ============================================================ */

.btn-primary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-muted {
  font-family: inherit;
  font-size: var(--fs-row);
  font-weight: var(--fw-medium);
  padding: 4px 10px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background 80ms ease, border-color 80ms ease;
}

.btn-primary {
  background: rgba(55, 138, 221, 0.10);
  color:      var(--accent-blue);
  border:     0.5px solid rgba(55, 138, 221, 0.24);
}
.btn-success {
  background: rgba(61, 214, 140, 0.07);
  color:      var(--accent-green);
  border:     0.5px solid rgba(61, 214, 140, 0.22);
}
.btn-warning {
  background: rgba(245, 192, 74, 0.08);
  color:      var(--accent-amber);
  border:     0.5px solid rgba(245, 192, 74, 0.22);
}
.btn-danger {
  background: rgba(220, 80, 80, 0.07);
  color:      var(--accent-red);
  border:     0.5px solid rgba(220, 80, 80, 0.20);
}
.btn-muted {
  background: rgba(255, 255, 255, 0.04);
  color:      rgba(152, 178, 228, 0.7);
  border:     0.5px solid rgba(82, 112, 165, 0.17);
}

.btn-primary:hover { background: rgba(55, 138, 221, 0.18); }
.btn-success:hover { background: rgba(61, 214, 140, 0.13); }
.btn-warning:hover { background: rgba(245, 192, 74, 0.14); }
.btn-danger:hover  { background: rgba(220,  80,  80, 0.13); }
.btn-muted:hover   { background: rgba(255, 255, 255, 0.07); }

/* ============================================================
   Progress + separators
   ============================================================ */

.track {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.fill {
  height: 100%;
  border-radius: 2px;
  background: var(--domain-accent, var(--accent-blue));
}

.sep {
  height: 0.5px;
  background: var(--border-divider);
}

/* ============================================================
   Section labels
   ============================================================ */

.lbl {
  font-size:    var(--fs-label);
  color:        var(--text-label);
  font-weight:  var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ============================================================
   Runtime pill (taskbar provider indicator)
   ============================================================ */

.rt-pill {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(21, 155, 100, 0.10);
  border: 0.5px solid rgba(21, 155, 100, 0.22);
  font-size: var(--fs-label);
  color: var(--accent-green);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rt-pill.warn  { background: rgba(245, 168, 66, 0.10); border-color: rgba(245, 168, 66, 0.24); color: var(--accent-amber); }
.rt-pill.alert { background: rgba(220,  80, 80, 0.10); border-color: rgba(220,  80, 80, 0.24); color: var(--accent-red); }

/* ============================================================
   Domain-accent underline (taskbar app buttons)
   Apply via .tba::after — set --domain-accent on the .tba.
   ============================================================ */

.tba-underline-host {
  position: relative;
}
.tba-underline-host::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--domain-accent, transparent);
}

/* ============================================================
   Slim chat code tokens
   ============================================================ */

:root {
  --chat-code-bg: rgba(8, 14, 24, 0.9);
  --chat-code-border: rgba(95, 227, 255, 0.16);
  --chat-code-inline-bg: rgba(95, 227, 255, 0.08);
  --chat-code-inline-border: rgba(95, 227, 255, 0.12);
  --chat-code-text: rgba(232, 241, 227, 0.94);
  --chat-code-keyword: #7dd3fc;
  --chat-code-string: #59f0a7;
  --chat-code-number: #ffbe63;
  --chat-code-comment: rgba(146, 170, 162, 0.72);
  --chat-code-function: #f472b6;
  --chat-code-punctuation: rgba(210, 223, 214, 0.84);
}