/* ===== Pi-DESIGN — Warm Parchment Notebook ===== */
:root {
  /* Semantic accent */
  --accent: #6a9fcc;
  --accent-light: #8ab8dc;
  --accent-dim: #5a8db5;
  --accent-bg: rgba(106, 159, 204, 0.07);
  --accent-bg-hover: rgba(106, 159, 204, 0.13);
  --accent-rust: #8f3222;
  --success: #5db87a;
  --success-bg: rgba(93, 184, 122, 0.10);
  --error: #e8704f;
  --error-bg: rgba(232, 112, 79, 0.10);
  --warning: #e8993a;
  --warning-bg: rgba(232, 153, 58, 0.10);

  /* Dark mode (default) — Midnight Slate */
  --bg-deep: #0d1116;
  --bg-canvas: #161d27;
  --panel: #212730e6;
  --panel-hover: #272e3a;
  --panel-soft: #252f3dd1;
  --text: #ebe7e4;
  --text-body: #ebe7e4bf;
  --muted: #9fa4abad;
  --muted-strong: #d5d8dbcc;
  --border: #49505980;
  --border-strong: #757d8975;
  --color-scheme: dark;

  /* Page grid overlay */
  --grid-minor: hsl(218 60% 80% / 0.009);
  --grid-major: hsl(218 60% 80% / 0.026);
  --grid-cross: hsl(218 60% 80% / 0.075);
}

[data-theme="light"] {
  /* Light mode — Parchment Notebook */
  --accent: #4b607c;
  --accent-light: #607898;
  --accent-dim: #3d516a;
  --accent-bg: rgba(75, 96, 124, 0.06);
  --accent-bg-hover: rgba(75, 96, 124, 0.12);
  --accent-rust: #b86b52;

  --bg-deep: #dacbc2;
  --bg-canvas: #ebe7e4;
  --panel: #f4f2f0;
  --panel-hover: #efecea;
  --panel-soft: #eef1f3;
  --text: #252f3d;
  --text-body: #384251dc;
  --muted: #5c5752c4;
  --muted-strong: #394352d6;
  --border: #8b847d59;
  --border-strong: #5c575240;
  --color-scheme: light;

  --grid-minor: #252f3d08;
  --grid-major: #252f3d12;
  --grid-cross: #252f3d1d;
}

/* ===== Reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: var(--color-scheme); scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-deep);
  color: var(--text-body);
  line-height: 1.55;
  font-size: 0.96rem;
  font-weight: 450;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Page-grid overlay — engineering notebook texture */
  background-image:
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-cross) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-cross) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px, 50px 50px, 50px 50px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ===== Typography — Serif display + Mono structural ===== */
h1, h2, h3, h4 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 400;
}

.hidden { display: none !important; }

/* Tab transition */
.tab-content-enter { animation: tabFadeIn 280ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pi.dev accent underline for text */
.k-card p strong, .k-card li strong {
  color: var(--text);
  font-weight: 450;
}

/* Option press feedback (GSAP-enhanced) */
.opt-press { transform: scale(0.97); }

/* Theme transition */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 300ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  .sticky-nav { padding: 0.6rem 1.05rem 0; }
  .nav-inner { height: 44px; }
  .nav-brand { font-size: 0.95rem; }
  .nav-tab { font-size: 0.7rem; padding: 0.3rem 0.65rem; }
  .page-shell { padding: 0.85rem 1.05rem 3.25rem; }
  .chapter-nav { gap: 3px; }
  .ch-btn { font-size: 0.68rem; padding: 0.28rem 0.55rem; }
  .k-card { padding: 0.85rem; }
  .k-table { font-size: 0.75rem; }
  .k-table th, .k-table td { padding: 0.4rem 0.5rem; }
  .result-breakdown { gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}