/* ============================================================
   NIBIRU DOCS — DESIGN TOKENS
   Dark primary (cosmic), light variant (parchment)
   ============================================================ */

:root {
  /* ---- Cosmic palette (carried from start page) ---- */
  --space:        #0b0410;   /* deepest void */
  --space-2:      #120822;   /* panel bg */
  --space-3:      #1a0c2e;   /* raised */
  --plum:         #2a1545;   /* deep nebula plum */
  --plum-2:       #3a1d5e;   /* hover plum */

  --star:         #f4eedb;   /* cream — primary text */
  --star-soft:    #d8d2c0;   /* secondary text */
  --muted:        #8b85a3;   /* tertiary / labels */
  --muted-2:      #5e5878;   /* very muted */

  --line:         rgba(244, 238, 219, 0.08);
  --line-strong:  rgba(244, 238, 219, 0.16);
  --line-glow:    rgba(184, 107, 255, 0.25);

  /* ---- Accents (the "nebula" colors) ---- */
  --nebula-mag:   #b86bff;   /* magenta — primary accent, links */
  --nebula-mag-2: #d8a8ff;
  --nebula-cyan:  #6ad9ff;   /* cyan — secondary accent */
  --nebula-amber: #ffb574;   /* warm star highlight */
  --nebula-rose:  #ff7ab8;   /* hot pink */
  --nebula-green: #6ee7b0;   /* aurora green */

  /* ---- Semantic (callouts) ---- */
  --note-fg:      #6ad9ff;
  --note-bg:      rgba(106, 217, 255, 0.06);
  --note-border:  rgba(106, 217, 255, 0.30);

  --tip-fg:       #6ee7b0;
  --tip-bg:       rgba(110, 231, 176, 0.06);
  --tip-border:   rgba(110, 231, 176, 0.30);

  --warn-fg:      #ffb574;
  --warn-bg:      rgba(255, 181, 116, 0.06);
  --warn-border:  rgba(255, 181, 116, 0.32);

  --danger-fg:    #ff7ab8;
  --danger-bg:    rgba(255, 122, 184, 0.06);
  --danger-border:rgba(255, 122, 184, 0.32);

  /* ---- Type ---- */
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2x: 8px;
  --space-3x: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radii ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 48px -16px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 24px rgba(184, 107, 255, 0.25);

  /* ---- Layout ---- */
  --nav-h: 60px;
  --sidebar-w: 280px;
  --toc-w: 240px;
  --content-max: 760px;
}

/* ---- Light variant (parchment, retained from current docs) ---- */
.theme-light {
  --space:        #faf6ec;
  --space-2:      #f3eedc;
  --space-3:      #ece5cf;
  --plum:         #ede4ff;
  --plum-2:       #ddd0f5;

  --star:         #1a1330;
  --star-soft:    #4a4360;
  --muted:        #7a7390;
  --muted-2:      #a39db5;

  --line:         rgba(26, 19, 48, 0.08);
  --line-strong:  rgba(26, 19, 48, 0.16);
  --line-glow:    rgba(122, 56, 208, 0.30);

  --nebula-mag:   #7a38d0;
  --nebula-mag-2: #9b5fee;
  --nebula-cyan:  #1f8aaa;
  --nebula-amber: #c4731a;
  --nebula-rose:  #c43e7b;
  --nebula-green: #2a8b5e;

  --note-fg:      #1f6f8a;
  --note-bg:      rgba(31, 138, 170, 0.08);
  --note-border:  rgba(31, 138, 170, 0.30);

  --tip-fg:       #2a8b5e;
  --tip-bg:       rgba(42, 139, 94, 0.08);
  --tip-border:   rgba(42, 139, 94, 0.30);

  --warn-fg:      #c4731a;
  --warn-bg:      rgba(196, 115, 26, 0.08);
  --warn-border:  rgba(196, 115, 26, 0.32);

  --danger-fg:    #c43e7b;
  --danger-bg:    rgba(196, 62, 123, 0.08);
  --danger-border:rgba(196, 62, 123, 0.32);

  --shadow-sm: 0 1px 2px rgba(26, 19, 48, 0.08);
  --shadow-md: 0 8px 24px -8px rgba(26, 19, 48, 0.12);
  --shadow-lg: 0 24px 48px -16px rgba(26, 19, 48, 0.16);
  --shadow-glow: 0 0 24px rgba(122, 56, 208, 0.18);
}

/* ---- Base reset for in-frame components ---- */
.docs-frame {
  font-family: var(--font-sans);
  background: var(--space);
  color: var(--star);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
.docs-frame *,
.docs-frame *::before,
.docs-frame *::after {
  box-sizing: border-box;
}
.docs-frame button {
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.docs-frame a {
  color: var(--nebula-mag);
  text-decoration: none;
  text-decoration-color: rgba(184, 107, 255, 0.4);
  text-underline-offset: 3px;
}
.docs-frame a:hover {
  text-decoration: underline;
}
.docs-frame ::selection {
  background: rgba(184, 107, 255, 0.35);
  color: var(--star);
}

/* Subtle galaxy texture for atmospheric backgrounds */
.cosmic-bg {
  position: relative;
  overflow: hidden;
}
.cosmic-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(184, 107, 255, 0.08), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(106, 217, 255, 0.05), transparent 50%);
  pointer-events: none;
}
.theme-light.cosmic-bg::before,
.theme-light .cosmic-bg::before {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(122, 56, 208, 0.05), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(31, 138, 170, 0.04), transparent 50%);
}