@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap');

:root,
[data-bs-theme="dark"] {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --bg-canvas: #101216;
  --bg-app: #161920;
  --bg-panel: #1b1f28;
  --bg-panel-2: #202632;
  --bg-panel-3: #272f3d;
  --bg-hover: rgba(242, 198, 109, 0.08);
  --bg-active: rgba(242, 198, 109, 0.14);
  --border-subtle: rgba(191, 205, 255, 0.08);
  --border-strong: rgba(191, 205, 255, 0.16);
  --border-accent: rgba(242, 198, 109, 0.42);

  --text-primary: #ecf2ff;
  --text-secondary: #b4bed8;
  --text-muted: #7d88a7;
  --text-inverse: #0d1117;

  --accent: #f2c66d;
  --accent-2: #87a8ff;
  --warning: #f7bf67;
  --danger: #f57f91;
  --success: #7de0b1;
  --overlay: rgba(7, 9, 12, 0.72);

  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.28);
  --topbar-height: 72px;
  --sidebar-width: 78px;
  --layout-gap: 16px;

  /* App palette aliases */
  --app-bg: var(--bg-canvas);
  --app-surface: var(--bg-panel);
  --app-surface-2: var(--bg-panel-2);
  --app-border: #262d3a;
  --app-text: var(--text-primary);
  --app-text-muted: var(--text-secondary);
  --app-accent: #f39c5a;
  --app-accent-hover: #e38c4b;
  --app-pad-bg: #070a10;

  /* Legacy/custom vars still used in components */
  --bg-primary: var(--app-bg);
  --bg-secondary: var(--app-surface);
  --bg-tertiary: var(--app-surface-2);
  --border-color: var(--app-border);
  --accent-color: var(--app-accent);
  --accent-hover: var(--app-accent-hover);
  --toolbar-height: 45px;
  --bg-sidebar: var(--app-bg);
  --bg-page: var(--app-surface);
  --bg-pad: var(--app-pad-bg);
  --bg-sidebar-hover: #1a2130;
  --bg-topbar: var(--app-bg);
  --hover-bg: #222a38;
  --accent-highlight: #f7b07d;
  --editor-bg: var(--app-surface);
  --toolbar-bg: var(--app-surface);
  --preview-bg: var(--app-surface);
  --code-bg: var(--app-surface);
  --text-color: var(--app-text);
  --secondary-text: var(--app-text-muted);

  /* Bootstrap theme tokens */
  --bs-body-bg: var(--bg-canvas);
  --bs-body-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-border-color: var(--app-border);
  --bs-primary: var(--accent-color);
  --bs-link-color: var(--accent-color);
  --bs-link-hover-color: var(--accent-hover);
  --bs-body-font-family: var(--font-body);
}

html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(180deg, rgba(242, 198, 109, 0.04), rgba(16, 18, 22, 0) 22%),
    var(--bg-canvas);
  background-size: 100% 100%, 100% 100%, 100% 100%, 24px 24px;
  color: var(--bs-body-color);
  font-family: var(--bs-body-font-family);
}

* {
  box-sizing: border-box;
}

button,
input,
textarea,
select {
  font: inherit;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

::selection {
  background: rgba(242, 198, 109, 0.24);
  color: var(--text-primary);
}

.app-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.panel-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(242, 198, 109, 0.04), transparent),
    var(--bg-panel);
  box-shadow: var(--shadow-panel);
}

.panel-empty-inner {
  max-width: 480px;
}

.panel-empty h2 {
  margin: 0 0 var(--space-3);
  font-size: 32px;
}

.panel-empty p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.app-modal-dialog {
  max-width: 680px;
}

.modal-backdrop.show {
  background:
    linear-gradient(180deg, rgba(242, 198, 109, 0.06), rgba(135, 168, 255, 0.02)),
    var(--overlay);
  opacity: 1;
}

.app-modal {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(242, 198, 109, 0.05), rgba(255, 255, 255, 0.015)),
    var(--bg-panel-2);
  color: var(--text-primary);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.44);
  overflow: hidden;
}

.app-modal-header,
.app-modal-footer {
  border-color: var(--border-subtle);
  background: rgba(255, 255, 255, 0.015);
  padding: var(--space-4) var(--space-5);
}

.app-modal-body {
  padding: var(--space-5);
}

.app-modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.app-modal .btn-close {
  filter: invert(1) saturate(0) brightness(1.3);
  opacity: 0.75;
}

.app-modal .btn-close:hover {
  opacity: 1;
}

.app-form-group {
  margin-bottom: var(--space-4);
}

.app-form-label {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.app-form-control {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(7, 10, 14, 0.38);
  color: var(--text-primary);
  min-height: 46px;
  padding: 0.78rem 0.95rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.app-form-control::placeholder {
  color: var(--text-muted);
}

.app-form-control:hover {
  border-color: var(--border-strong);
}

.app-form-control:focus {
  border-color: var(--border-accent);
  background: rgba(7, 10, 14, 0.55);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(242, 198, 109, 0.12);
}

.app-form-control:disabled {
  opacity: 0.55;
}

.app-form-control-textarea {
  min-height: 132px;
  resize: vertical;
}

.app-form-help {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.72rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.app-btn:hover {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.app-btn:disabled,
.app-btn.disabled {
  opacity: 0.5;
  transform: none;
}

.app-btn-primary {
  border-color: rgba(242, 198, 109, 0.35);
  background: linear-gradient(180deg, rgba(242, 198, 109, 0.2), rgba(242, 198, 109, 0.08));
  color: var(--accent);
}

.app-btn-primary:hover {
  border-color: rgba(242, 198, 109, 0.5);
  background: linear-gradient(180deg, rgba(242, 198, 109, 0.25), rgba(242, 198, 109, 0.12));
  color: #fff1cf;
}

.app-btn-secondary {
  color: var(--text-secondary);
}

.app-btn-danger {
  border-color: rgba(245, 127, 145, 0.32);
  background: linear-gradient(180deg, rgba(245, 127, 145, 0.18), rgba(245, 127, 145, 0.08));
  color: #ffb6c1;
}

.app-btn-danger:hover {
  border-color: rgba(245, 127, 145, 0.46);
  background: linear-gradient(180deg, rgba(245, 127, 145, 0.22), rgba(245, 127, 145, 0.12));
  color: #ffd6dd;
}