/* LLMindMap product site — tokens
   Palette rotates AWAY from purple+black. Bone canvas, ink text, rust accent.
   Accent pulled from existing category palette (--cat-issue #E5786D) so it stays
   on-brand without slipping into purple-on-black AI-slop territory.
*/
:root,
[data-theme="light"] {
  --bg:         #F2EFE8;      /* bone */
  --bg-raised:  #F7F4ED;
  --bg-deep:    #E8E4DA;
  --ink:        #1A1815;      /* ink, not pure black */
  --ink-60:     rgba(26,24,21,0.62);
  --ink-40:     rgba(26,24,21,0.40);
  --ink-20:     rgba(26,24,21,0.18);
  --ink-10:     rgba(26,24,21,0.10);
  --rule:       rgba(26,24,21,0.12);

  --accent:     #C9583C;      /* deepened rust from --cat-issue */
  --accent-soft:rgba(201,88,60,0.10);
  --ochre:      #B8864A;      /* deepened ochre from --cat-question */
  --sage:       #7A9A85;      /* deepened sage from --cat-info */
  --slate:      #536A8A;      /* deepened slate from --cat-decision */

  --success:    #2F7A5B;
  --warn:       #B8864A;
  --danger:     #A84232;
}

[data-theme="dark"] {
  --bg:         #14161A;      /* ink blue-black, NOT pure #000 */
  --bg-raised:  #1B1E23;
  --bg-deep:    #0D0F12;
  --ink:        #EAE5DA;      /* bone on ink */
  --ink-60:     rgba(234,229,218,0.62);
  --ink-40:     rgba(234,229,218,0.38);
  --ink-20:     rgba(234,229,218,0.18);
  --ink-10:     rgba(234,229,218,0.10);
  --rule:       rgba(234,229,218,0.12);

  --accent:     #E88266;
  --accent-soft:rgba(232,130,102,0.12);
  --ochre:      #D4A574;
  --sage:       #9AB8A2;
  --slate:      #8FA3BE;
}

:root {
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-serif: "Instrument Serif", "Cormorant Garamond", "Source Serif Pro", Georgia, serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --font-jp:   "Noto Serif JP", "Shippori Mincho", serif;

  --d-airy-section:  120px;
  --d-tight-section: 72px;
  --max-w: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  transition: background 300ms ease, color 300ms ease;
  zoom: 0.92;
}
@media (max-height: 820px) { body { zoom: 0.84; } }
@media (max-height: 700px) { body { zoom: 0.76; } }
@media (max-height: 580px) { body { zoom: 0.68; } }

/* Type roles */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-40); font-weight: 500;
}
.eyebrow-accent { color: var(--accent); }

.display {
  font-family: var(--font-serif);
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.96; letter-spacing: -0.03em;
  font-weight: 400;
  text-wrap: balance;
}
.display .jp {
  font-family: var(--font-jp);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.title-xl {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.02; letter-spacing: -0.02em;
  font-weight: 400;
}
.title-l  { font: 500 32px/1.1 var(--font-sans); letter-spacing: -0.02em; }
.title    { font: 500 22px/1.2 var(--font-sans); letter-spacing: -0.015em; }
.lede     { font: 400 20px/1.5 var(--font-sans); color: var(--ink-60); text-wrap: pretty; }
.body     { font: 400 15px/1.6 var(--font-sans); color: var(--ink-60); }
.small    { font: 400 13px/1.5 var(--font-sans); color: var(--ink-60); }
.mono     { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; }
.mono-hi  { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-40); }

/* Utility */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
.rule { height: 1px; background: var(--rule); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  font: 500 13.5px/1 var(--font-sans); letter-spacing: 0.01em; cursor: pointer;
  background: var(--ink); color: var(--bg);
  text-decoration: none;
  transition: all 180ms cubic-bezier(0.2,0.8,0.2,1);
}
.btn:hover { transform: translateY(-1px); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-20);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }

.btn-sm { height: 34px; padding: 0 14px; font-size: 12px; }
.mono-btn {
  font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 11px;
}

/* Density modes */
[data-density="tight"] .section  { padding-block: var(--d-tight-section); }
[data-density="airy"]  .section  { padding-block: var(--d-airy-section); }
[data-density="tight"] .display  { font-size: clamp(44px, 6vw, 88px); }

/* Lang pill */
.lang {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ink-20);
  font-family: var(--font-mono);
}
.lang button {
  border: 0; background: transparent; padding: 4px 10px; border-radius: 999px;
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-40); cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* Category chip — neumorphic pill, used in classification section */
.cat-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 14px; border-radius: 999px;
  background: var(--bg-raised);
  font: 500 13px/1 var(--font-sans); color: var(--ink);
  box-shadow:
    -2px -2px 5px rgba(255,255,255,0.7),
    3px 3px 8px rgba(26,24,21,0.10),
    inset 0 0 0 0.5px rgba(26,24,21,0.04);
  white-space: nowrap;
}
.cat-chip i {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; flex: 0 0 auto;
}
.cat-chip b {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11.5px; color: var(--ink-40); margin-left: 2px;
  letter-spacing: 0.04em;
}
[data-theme="dark"] .cat-chip {
  background: var(--bg-raised);
  box-shadow:
    -2px -2px 5px rgba(255,255,255,0.04),
    3px 3px 8px rgba(0,0,0,0.5),
    inset 0 0 0 0.5px rgba(255,255,255,0.04);
}

/* Liquid glass nav — dark mode override */
[data-theme="dark"] nav {
  background: rgba(20,22,26,0.45) !important;
  border-color: rgba(255,255,255,0.08) !important;
  border-top-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Hero float animation — 3D tilt + bob */
@keyframes heroFloat {
  0%, 100% { transform: rotateY(-8deg) rotateX(3deg) translateY(0); }
  50% { transform: rotateY(-8deg) rotateX(3deg) translateY(-14px); }
}
.hero-mock {
  transition: scale 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.hero-mock:hover {
  scale: 1.03;
}