/* ============================================================
   DocSpace — design system tokens
   Implementation of docs/design-system.md (the source of truth).
   White-label: a space brand only drives the accent tokens, through the
   §2.5 guard (web/src/lib/brandGuard.js). Surfaces never change.
   ============================================================ */

/* ---- 1. Tokens ------------------------------------------------ */
:root {
  /* Typography — docs/design-system.md §3 (R0.1): two families, one job each */
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* code only */

  /* Type scale — §3.2: 7 sizes, rem sizes + unitless line heights. Every
     font-size goes through one of these (enforced by `npm run lint`). */
  --fs-title:    2rem;      /* 32px — note title */
  --lh-title:    1.25;      /* 40px */
  --fs-h1:       1.5rem;    /* 24px — heading 1 */
  --lh-h1:       1.3333;    /* 32px */
  --fs-h2:       1.25rem;   /* 20px — heading 2 */
  --lh-h2:       1.4;       /* 28px */
  --fs-prose:    1rem;      /* 16px — note body, H3 */
  --lh-prose:    1.625;     /* 26px */
  --fs-ui-title: 0.9375rem; /* 15px — panel and inspector titles */
  --lh-ui-title: 1.3333;    /* 20px */
  --fs-ui:       0.8125rem; /* 13px — rows, tabs, menus, forms, buttons */
  --lh-ui:       1.3846;    /* 18px */
  --fs-meta:     0.75rem;   /* 12px — timestamps, counts. The floor */
  --lh-meta:     1.3333;    /* 16px */
  --fs-code:     0.8125rem; /* 13px — code blocks and inline code */
  --lh-code:     1.5385;    /* 20px */

  /* Legacy scale → nearest §3.2 token (ties round down). R4 deletes these. */
  --fs-xs:   var(--fs-meta);  /* was 12px */
  --fs-sm:   var(--fs-ui);    /* was 13px */
  --fs-base: var(--fs-ui);    /* was 14px */
  --fs-md:   var(--fs-prose); /* was 16px */
  --fs-lg:   var(--fs-prose); /* was 18px */
  --fs-xl:   var(--fs-h2);    /* was 22px */
  --fs-2xl:  var(--fs-h1);    /* was 28px */
  --fs-3xl:  var(--fs-title); /* was 36px */

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-body:  1.6;  /* UI and prose */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;

  --measure: 72ch; /* doc/prose max-width */

  /* --- Spacing (base 4px) --- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 5rem;     /* 80px */

  /* --- Border radii: three (docs/design-system.md §4.1) ---
     --radius-control 6px · --radius-card 8px · --radius-pill 999px.
     xs/sm/md/lg/2xl+ are legacy names kept as aliases of those three (R4);
     inline code keeps its own 4px in the code rule.
  */
  --radius-control: 6px;
  --radius-card:    8px;
  --radius-pill:    999px;
  --radius-xs:   var(--radius-control);
  --radius-sm:   var(--radius-control);
  --radius-md:   var(--radius-card);
  --radius-lg:   var(--radius-card);
  --radius-2xl:  var(--radius-card);
  --radius-3xl:  var(--radius-card);
  --radius-4xl:  var(--radius-card);

  /* --- Elevation: two levels (§4.2) ---
     In-page surfaces are border-only (--shadow-sm is none); floating layers
     use --shadow-md. --shadow-lg/xl are legacy aliases of the floating level.
  */
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.30);
  --shadow-lg: var(--shadow-md);
  --shadow-xl: var(--shadow-md);

  /* --- Motion --- */
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur:      200ms;
  --dur-slow: 320ms;
}

/* ---- Color tokens — docs/design-system.md §2.2 ------------------------------
   Dark values are the no-JS fallback on :root and the [data-theme="dark"]
   values; light values are on [data-theme="light"]. At startup
   web/src/lib/theme.js sets [data-theme] from `prefers-color-scheme` unless
   the user picked a theme (§2.4). Ratios are WCAG 2.x, see §2.2.
   A custom space brand overrides only --c-accent, --c-accent-hover,
   --c-on-accent, --c-selected and --c-accent-subtle, on :root (§2.5). */
:root, [data-theme="dark"] {
  /* Surfaces: neutral, never tinted by a brand */
  --c-surface:  #1E1E1E; /* note, cards, inputs */
  --c-chrome:   #262626; /* ribbon, file tree, tabs bar, panes, status bar */
  --c-hover:    #333333; /* hover row, pressed ghost button */
  --c-selected: #332C48; /* selected row */
  --c-overlay:  #2A2A2A; /* menu, dialog, palette */
  --c-canvas:   #222222; /* graph canvas */

  /* Borders */
  --c-border:         #363636; /* decorative only */
  --c-border-control: #8A8A8A; /* control boundaries, ≥ 3:1 on every surface */

  /* Text: ratios on surface · chrome */
  --c-text:       #DADADA; /* 11.93 · 10.83 */
  --c-text-soft:  #B3B3B3; /* 7.95 · 7.22 */
  --c-text-faint: #949494; /* 5.50 · 4.99 — surface, chrome and overlay only */

  /* Accent ("link ink"): links, primary action, selection, focus */
  --c-accent:        #A88BFA; /* 6.14 · 5.58 */
  --c-accent-hover:  #C2ADFF;
  --c-on-accent:     #1E1E1E; /* 6.14 on accent · 8.51 on hover */
  --c-accent-subtle: #332D49; /* tag background, accent on it 4.80 */
  --c-focus:         var(--c-accent);
  --c-selection:     color-mix(in srgb, var(--c-accent) 20%, transparent);

  /* AI content has no hue of its own (§2.1 rule 3) */
  --ai-subtle: #29253A;

  /* Inline code */
  --code-text: #F08DB4;
  --code-bg:   #2C2C2C;

  /* Status: text/background pairs ≥ 4.5:1 */
  --status-danger:      #FF8A80;
  --status-danger-bg:   #3A1D1C;
  --status-warning:     #FDB022;
  --status-warning-bg:  #30260F;
  --status-success:     #8CE09B;
  --status-success-bg:  #1F3324;
  --status-success-dot: #51CF66;
  /* Neutral status (not in §2.2 yet; decided in R4) */
  --status-neutral:     #9BA8B9;
  --status-neutral-bg:  rgba(155, 168, 185, 0.10);

  /* Graph (§2.2, §9): content colors, never chrome. Topic colors are also
     the categorical palette of board charts. */
  --graph-edge:        #4A4A4A; /* inside a topic, decorative */
  --graph-edge-strong: #777777; /* named relation, 3.55 on canvas */
  --graph-1: #4FB3A9;
  --graph-2: #D9A441;
  --graph-3: #E07AA8;
  --graph-4: #8DBF5A;

  accent-color: var(--c-accent);
  color-scheme: dark;
}

[data-theme="light"] {
  --c-surface:  #FFFFFF;
  --c-chrome:   #F6F6F6;
  --c-hover:    #E9E9E9;
  --c-selected: #E6E1FA;
  --c-overlay:  #FFFFFF;
  --c-canvas:   #FAFAFA;

  --c-border:         #E2E2E2;
  --c-border-control: #757575;

  --c-text:       #222222; /* 15.91 · 14.72 */
  --c-text-soft:  #5C5C5C; /* 6.69 · 6.19 */
  --c-text-faint: #6B6B6B; /* 5.33 · 4.93 */

  --c-accent:        #6A4BD8; /* 5.82 · 5.38 */
  --c-accent-hover:  #5536C4;
  --c-on-accent:     #FFFFFF; /* 5.82 on accent · 7.75 on hover */
  --c-accent-subtle: #EEEAFB; /* accent on it 4.93 */
  --c-focus:         var(--c-accent);
  --c-selection:     color-mix(in srgb, var(--c-accent) 20%, transparent);

  --ai-subtle: #F4F1FD;

  --code-text: #B4235A;
  --code-bg:   #F2F2F2;

  --status-danger:      #B42318;
  --status-danger-bg:   #FEF3F2;
  --status-warning:     #B54708;
  --status-warning-bg:  #FFFAEB;
  --status-success:     #1E6B2E;
  --status-success-bg:  #E8F5EB;
  --status-success-dot: #2F9E44;
  --status-neutral:     #57606A;
  --status-neutral-bg:  rgba(87, 96, 106, 0.08);

  --graph-edge:        #C4C4C4;
  --graph-edge-strong: #858585;
  --graph-1: #0F766E;
  --graph-2: #A16207;
  --graph-3: #BE185D;
  --graph-4: #4D7C0F;

  accent-color: var(--c-accent);

  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.06);

  color-scheme: light;
}

/* Increased contrast (§2.3), both themes. */
@media (prefers-contrast: more) {
  :root, [data-theme="dark"], [data-theme="light"] {
    --c-text-faint: var(--c-text-soft);
    --c-border:     var(--c-border-control);
    --graph-edge:   var(--graph-edge-strong);
  }
}


/* ---- 2. Reset / base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--c-chrome);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "calt" 1;
}
::selection { background: var(--c-selection); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: var(--radius-pill);
  border: 3px solid var(--c-chrome);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-text-faint); }
a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Native controls take the app's type and ink, so nothing renders in the
   user-agent Arial/Times or black (docs/design-system.md §3.1). In the `base`
   layer, so any component class or Tailwind utility still wins. */
@layer base {
  button, input, select, textarea { font: inherit; color: inherit; }
  ::placeholder { color: var(--c-text-faint); opacity: 1; }
}

/* Visible keyboard focus on every interactive element (§11): 2px accent ring,
   2px offset. Unlayered on purpose, so `outline: none` utilities cannot hide it. */
:is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]),
  [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="menuitemcheckbox"],
  [role="menuitemradio"], [role="option"], [role="checkbox"], [role="radio"], [role="switch"],
  [role="combobox"], [role="slider"]):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}


/* ---- 3. Tipografía editorial --------------------------------- */
.prose {
  font-family: var(--font-sans);
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  letter-spacing: var(--tracking-normal);
  color: var(--c-text);
  max-width: var(--measure);
}
.prose .h1, .display {
  font-family: var(--font-sans);
  font-size: var(--fs-title);
  font-weight: var(--weight-bold);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.prose .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-tight);
}
.prose .quote {
  font-style: italic;
  border-left: 3px solid var(--c-accent);
  padding-left: var(--space-4);
  color: var(--c-text-soft);
}
.prose .code {
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: var(--lh-code);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xs);
  padding: var(--space-3) var(--space-4);
  white-space: pre-wrap;
  color: var(--c-accent);
}
.text-soft { color: var(--c-text-soft); }
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-text-soft); /* section label (§3.2) */
  font-weight: var(--weight-medium);
}


/* ---- 4. Wiki links ------------------------------------------- */
/* §2.2: wiki links are accent ink with an underline; broken ones are danger
   with a dashed underline (never color alone, §2.1 rule 5). */
.wikilink {
  color: var(--c-accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: none;
}
.wikilink:hover { color: var(--c-accent-hover); text-decoration-thickness: 2px; }
.wikilink.broken { color: var(--status-danger); text-decoration-style: dashed; }
@media (prefers-contrast: more) {
  .wikilink { text-decoration-thickness: 2px; }
}
.tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--c-accent);
  background: var(--c-accent-subtle);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}


/* ---- 5. Botones ---------------------------------------------- */
.btn {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid var(--c-border);
  background: var(--c-hover);
  color: var(--c-text);
  border-radius: var(--radius-sm);
  height: 36px;
  padding: 0 var(--space-4);
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; white-space: nowrap;
  transition: none;
}
.btn:hover  { background: var(--c-overlay); border-color: var(--c-border-control); }
.btn:active { opacity: 0.85; }
.btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.btn-primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}
.btn-primary:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
}
.btn-primary:active { background: var(--c-accent-hover); box-shadow: none; }

.btn-ghost { border-color: transparent; background: transparent; color: var(--c-text-soft); }
.btn-ghost:hover  { background: var(--c-hover); color: var(--c-text); border-color: transparent; }

.btn-danger {
  background: var(--status-danger-bg);
  color: var(--status-danger);
  border-color: transparent;
}
.btn-danger:hover { background: color-mix(in srgb, var(--status-danger) 20%, transparent); }

.btn-ai {
  background: var(--ai-subtle);
  color: var(--c-accent);
  border-color: transparent;
}

.btn-sm { height: 28px; padding: 0 var(--space-3); font-size: var(--fs-xs); }
.btn-lg { height: 44px; padding: 0 var(--space-5); font-size: var(--fs-ui); border-radius: var(--radius-md); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: none; background: transparent; color: var(--c-text-soft);
  cursor: pointer;
  transition: none;
}
.icon-btn:hover  { background: var(--c-hover); color: var(--c-text); }
.icon-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.icon-btn.active { background: var(--c-selected); color: var(--c-accent); }


/* ---- 6. Navegación / árbol ----------------------------------- */
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
  transition: none;
}
.nav-item:hover { background: var(--c-hover); color: var(--c-text); }
.nav-item.active {
  background: var(--c-selected);
  color: var(--c-accent);
  font-weight: var(--weight-medium);
}
.nav-item.active::before {
  content: "";
  position: absolute; left: -2px; top: 7px; bottom: 7px;
  width: 3px; border-radius: var(--radius-pill);
  background: var(--c-accent);
}


/* ---- 7. Tarjetas / paneles ----------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: none;
}
.card:is(.interactive):hover {
  border-color: var(--c-border-control);
  box-shadow: var(--shadow-md);
}
.divider { height: 1px; background: var(--c-border); border: 0; margin: var(--space-5) 0; }

.empty {
  text-align: center;
  max-width: 30rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-md);
}
.empty .empty-icon {
  width: 64px; height: 64px;
  border-radius: var(--radius-pill);
  background: var(--c-selected);
  color: var(--c-accent);
  display: grid; place-items: center;
  font-size: var(--fs-h1);
  margin: 0 auto var(--space-4);
}
.empty h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--c-text);
}
.empty p { margin: 0 auto; color: var(--c-text-soft); font-size: var(--fs-sm); max-width: 38ch; }


/* ---- 8. Space Member List ------------------------------------ */
.space-member-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  max-width: 800px;
}

.member-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.member-list-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--weight-bold);
  color: var(--c-text);
}

.member-list-table {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.member-list-row {
  display: grid;
  grid-template-columns: 1fr 1fr 140px 40px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-border);
  transition: none;
}

.member-list-row:last-child {
  border-bottom: none;
}

.member-list-row:not(.member-list-row--header):hover {
  background-color: var(--c-hover);
}

.member-list-row--header {
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-text-faint);
  background-color: var(--c-hover);
}

.member-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.member-cell--email {
  color: var(--c-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-cell--role .btn {
  margin: 0;
}

.member-cell--actions {
  justify-content: center;
}

.member-cell--name {
  overflow: hidden;
}

.member-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Member Avatar ─────────────────────────────────────────── */
.member-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background-color: var(--c-selected);
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  user-select: none;
}

/* ── Member Badge (self indicator) ─────────────────────────── */
.member-badge {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: var(--weight-medium);
  color: var(--c-accent);
  background-color: var(--c-selected);
  border-radius: var(--radius-pill);
  padding: 1px var(--space-2);
}

.member-remove-btn:hover:not(:disabled) {
  color: var(--status-danger);
}

/* ── Visually Hidden (a11y) ─────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---- 9. Backlinks -------------------------------------------- */
.backlinks { font-family: var(--font-sans); }
.backlink {
  display: block;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: none;
}
.backlink:hover {
  border-color: var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}
.backlink .title   { font-weight: var(--weight-medium); font-size: var(--fs-sm); }
.backlink .snippet { color: var(--c-text-soft); font-size: var(--fs-xs); margin-top: 2px; }


/* ---- 9. Utilidades ------------------------------------------- */
.stack > * + * { margin-top: var(--space-4); }
.row    { display: flex; align-items: center; gap: var(--space-3); }
.spacer { flex: 1; }
.muted  { color: var(--c-text-soft); }
.center { display: grid; place-items: center; }