@import "./layout.css";
@import "./tree.css";
@import "./detail.css";

:root {
  color-scheme: dark;
  --bg:
    radial-gradient(circle at top, rgba(59, 130, 246, 0.14), transparent 30%),
    linear-gradient(180deg, #020817 0%, #01040b 100%);
  --card: linear-gradient(180deg, #07111f 0%, #06101d 100%);
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: rgba(148, 163, 184, 0.18);
  --primary: #7ea8ff;
  --primary-rgb: 126, 168, 255;
  --brand: #c19a2e;
  --input-bg: rgba(7, 17, 31, 0.92);
  --choice-bg: rgba(7, 17, 31, 0.92);

  --navigator-bg: var(--bg);
  --navigator-panel-bg: var(--card);
  --navigator-panel-border: var(--border);
  --navigator-text: var(--text);
  --navigator-text-muted: var(--muted);
  --navigator-accent: var(--brand);
  --navigator-accent-soft: rgba(193, 154, 46, 0.14);
  --navigator-selected: rgba(var(--primary-rgb), 0.12);
  --navigator-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  --navigator-radius: 20px;
  --navigator-radius-sm: 12px;
  --navigator-max-width: 1360px;
  --navigator-sticky-offset: 16px;
}

html[data-theme="dark"] {
  --bg: #06080c;
  --card: #0d1118;
  --text: #e6e9ef;
  --muted: #aab2c0;
  --border: #2b3345;
  --primary: #b38f45;
  --primary-rgb: 180, 143, 69;
  --brand: #c19a2e;
  --input-bg: #0f1217;
  --choice-bg: #0f1217;

  --navigator-accent-soft: rgba(193, 154, 46, 0.14);
  --navigator-selected: rgba(179, 143, 69, 0.16);
}

html[data-theme="light"] {
  --bg: #f2f4f8;
  --card: #fbfcfe;
  --text: #1c2433;
  --muted: #5f6b7a;
  --border: #e3e8f0;
  --primary: #4f7cff;
  --primary-rgb: 79, 124, 255;
  --brand: #c19a2e;
  --input-bg: #ffffff;
  --choice-bg: #ffffff;

  --navigator-accent-soft: rgba(193, 154, 46, 0.12);
  --navigator-selected: rgba(79, 124, 255, 0.12);
}

html[data-theme="soft"] {
  --bg: #0f1412;
  --card: #161d18;
  --text: #e6efe9;
  --muted: #9fb3a8;
  --border: #26322c;
  --primary: #4dbd88;
  --primary-rgb: 77, 189, 136;
  --brand: #c19a2e;
  --input-bg: #121814;
  --choice-bg: #121814;

  --navigator-accent-soft: rgba(193, 154, 46, 0.14);
  --navigator-selected: rgba(77, 189, 136, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--navigator-bg);
  color: var(--navigator-text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body {
  line-height: 1.5;
}

main {
  display: block;
}

.navigator-empty-state {
  border: 1px dashed var(--navigator-panel-border);
  border-radius: var(--navigator-radius-sm);
  padding: 18px 16px;
  color: var(--navigator-text-muted);
  background: rgba(255, 255, 255, 0.02);
}

.navigator-empty-state p {
  margin: 0;
}