/* nTop Community — shared tokens + base */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500&display=swap');

html, body { margin: 0; padding: 0; height: 100%; background: var(--paper, #F4F2EC); }
#root { width: 100vw; height: 100vh; }

:root {
  /* Paper (direction 1: Brutalist) */
  --paper: #F4F2EC;
  --paper-2: #ECE8DE;
  --paper-3: #E2DCCC;
  --ink: #0F1113;
  --ink-2: #2A2B2E;
  --ink-3: #5A5B5E;
  --ink-4: #8B8A85;
  --rule: #0F1113;
  --rule-soft: rgba(15,17,19,0.14);
  --accent: oklch(0.68 0.18 42);       /* signal orange */
  --accent-ink: oklch(0.38 0.12 42);
  --accent-soft: oklch(0.93 0.05 60);
  --verified: oklch(0.55 0.12 180);    /* teal for verified */

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
}

.theme-dark {
  --paper: #0E1013;
  --paper-2: #15181C;
  --paper-3: #1D2126;
  --ink: #F2EFE8;
  --ink-2: #D6D2C7;
  --ink-3: #8E8A80;
  --ink-4: #5C5952;
  --rule: #F2EFE8;
  --rule-soft: rgba(242,239,232,0.14);
  --accent: oklch(0.75 0.17 55);
  --accent-ink: oklch(0.82 0.15 55);
  --accent-soft: oklch(0.28 0.08 55);
  --verified: oklch(0.72 0.12 180);
}

.theme-soft {
  --paper: #FBFAF7;
  --paper-2: #F3F1EB;
  --paper-3: #E9E6DE;
  --ink: #1A1C1F;
  --ink-2: #3A3C40;
  --ink-3: #6A6C70;
  --ink-4: #9A9C98;
  --rule: #1A1C1F;
  --rule-soft: rgba(26,28,31,0.10);
  --accent: oklch(0.70 0.15 35);
  --accent-ink: oklch(0.45 0.13 35);
  --accent-soft: oklch(0.95 0.03 60);
  --verified: oklch(0.60 0.10 180);
}

/* Base reset inside the app */
.ntop-app, .ntop-app * { box-sizing: border-box; }
.ntop-app {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: 'ss01','cv11','tnum';
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  line-height: 1.4;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ntop-app button { font-family: inherit; }

/* Typography helpers */
.mono { font-family: var(--mono); font-feature-settings: 'ss02','cv03'; }
.caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; font-weight: 500; }
.hair { border-bottom: 1px solid var(--rule-soft); }
.hair-t { border-top: 1px solid var(--rule-soft); }
.rule { border-bottom: 1px solid var(--rule); }
.rule-t { border-top: 1px solid var(--rule); }

/* Scrollable inner panes */
.scroll-y { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
.scroll-y::-webkit-scrollbar { width: 6px; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 3px; }

/* Shared logo mark */
.ntop-mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
}
.ntop-mark .glyph {
  width: 18px; height: 18px; background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  border-radius: 2px;
}
.ntop-mark .slash { color: var(--ink-4); margin: 0 2px; }
.ntop-mark .community { color: var(--ink-3); font-weight: 500; }
/* Theme-conditional logo swap: light logo for paper/soft, dark logo for dark theme */
.ntop-mark .ntop-logo-light { display: block; }
.ntop-mark .ntop-logo-dark  { display: none; }
.theme-dark .ntop-mark .ntop-logo-light { display: none; }
.theme-dark .ntop-mark .ntop-logo-dark  { display: block; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  padding: 6px 12px; border: 1px solid var(--rule); background: transparent;
  color: var(--ink); cursor: pointer; border-radius: 2px;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { background: var(--paper-2); color: var(--ink); }
.btn.sm { padding: 4px 8px; font-size: 11px; }
.btn.lg { padding: 10px 18px; font-size: 13px; }

/* Tag */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  padding: 2px 6px; border: 1px solid var(--rule-soft);
  color: var(--ink-2); background: transparent; border-radius: 2px;
  white-space: nowrap;
}
.tag.solid { background: var(--paper-2); border-color: transparent; }
.tag.accent { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }

/* Badge */
.verified-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; background: var(--verified);
  color: #fff; border-radius: 50%;
  font-family: var(--mono); font-size: 8px; font-weight: 700;
}

/* Node-graph preview (SVG based) */
.preview-tile {
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}
.preview-tile.striped {
  background-image: repeating-linear-gradient(
    135deg,
    var(--paper-2) 0 8px,
    var(--paper-3) 8px 9px
  );
}

/* Star rating */
.stars { display: inline-flex; gap: 1px; }
.stars .s { color: var(--ink); }
.stars .s.off { color: var(--rule-soft); }

/* Inputs */
.input {
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  padding: 8px 12px; border: 1px solid var(--rule-soft); background: var(--paper);
  border-radius: 2px; width: 100%;
}
.input:focus { outline: none; border-color: var(--ink); }
.input.mono { font-family: var(--mono); font-size: 12px; }
textarea.input { resize: vertical; font-family: var(--sans); line-height: 1.5; }

/* Kbd */
.kbd {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  padding: 1px 5px; border: 1px solid var(--rule-soft);
  border-bottom-width: 2px; background: var(--paper-2); border-radius: 2px;
  color: var(--ink-3);
}

/* Loading indicator before React mounts */
.app-loading {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  background: var(--paper);
}