@import url('./layout.css');
@import url('./ledger-theme.css');

/**
 * Quest Forge — design tokens
 * Dark fantasy command-center palette (original implementation)
 */

:root {
  color-scheme: dark;

  --bg-primary: #121218;
  --bg-secondary: #1a1a22;
  --bg-tertiary: #22222c;
  --bg-hover: #2a2a36;
  --bg-active: #32323f;
  --bg-glass: rgba(26, 26, 34, 0.72);

  --accent-primary: #6366f1;
  --accent-primary-hover: #7c7ff5;
  --accent-secondary: #8b5cf6;
  --accent-tertiary: #c084fc;
  --accent-primary-rgb: 99, 102, 241;
  --accent-secondary-rgb: 139, 92, 246;

  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --text-disabled: #52525b;

  --border-primary: #3f3f46;
  --border-secondary: #27272a;
  --border-accent: rgba(var(--accent-primary-rgb), 0.45);

  --overlay-dark: rgba(0, 0, 0, 0.65);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.55);

  --scrollbar-size: 10px;
  --scrollbar-track: rgba(8, 10, 16, 0.55);
  --scrollbar-thumb: linear-gradient(
    180deg,
    rgba(var(--accent-primary-rgb), 0.55),
    rgba(var(--accent-secondary-rgb), 0.4)
  );
  --scrollbar-thumb-hover: linear-gradient(
    180deg,
    rgba(var(--accent-primary-rgb), 0.72),
    rgba(var(--accent-secondary-rgb), 0.55)
  );
  --scrollbar-thumb-border: rgba(8, 10, 16, 0.5);

  --menu-bg: rgba(18, 18, 26, 0.98);
  --menu-bg-raised: linear-gradient(180deg, rgba(28, 28, 38, 0.98), rgba(16, 16, 24, 0.98));
  --menu-border: rgba(255, 255, 255, 0.1);
  --menu-hover: rgba(var(--accent-primary-rgb), 0.14);
  --menu-shadow: var(--shadow-lg);

  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --gradient-glow: radial-gradient(circle at 20% 20%, rgba(var(--accent-primary-rgb), 0.18), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(var(--accent-secondary-rgb), 0.14), transparent 50%);

  --font-display: "Cinzel", "Palatino Linotype", "Book Antiqua", serif;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  --tabbar-height: 72px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--text-primary);
  font-family: var(--font-body);
  background: var(--bg-primary);
}

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

.hidden {
  display: none !important;
}

/* ── Shared scrollbars (Firefox + Chromium) ───────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-primary-rgb), 0.45) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-thumb-border);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── Shared popout / context menu chrome ──────────────────── */
.qf-menu,
.import-menu,
.sp-menu,
.pn-context-menu,
.ps-inv-context-menu,
.mp-inv-context-menu,
.network-popover {
  border: 1px solid var(--menu-border);
  border-radius: var(--radius-md);
  background: var(--menu-bg);
  box-shadow: var(--menu-shadow);
  color: var(--text-primary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.qf-menu,
.import-menu,
.sp-menu,
.pn-context-menu,
.ps-inv-context-menu,
.mp-inv-context-menu {
  padding: 0.35rem;
}

.import-menu button,
.sp-menu-item,
.pn-context-menu button,
.ps-inv-context-item,
.mp-inv-context-menu button,
.qf-menu button,
.qf-menu [role="menuitem"] {
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.import-menu button:hover,
.sp-menu-item:hover,
.pn-context-menu button:hover,
.ps-inv-context-item:hover:not(:disabled),
.mp-inv-context-menu button:hover:not(:disabled),
.qf-menu button:hover,
.qf-menu [role="menuitem"]:hover {
  background: var(--menu-hover);
}

select,
select.field-input,
select.field-select {
  color-scheme: dark;
}