/* Shared base styles for kushalgangaraju.com (index + notes pages) */

:root {
  --bg: #f7f3ef;
  --bg-alt: #fffaf4;
  --text: #1f1b16;
  --muted: #5f564d;
  --accent: #c17b54;
  --accent-strong: #a5623f;
  --accent-warm: #c17b54;
  --accent-warm-strong: #a5623f;
  --border: rgba(31, 27, 22, 0.12);
  --card: rgba(255, 255, 255, 0.88);
  --radius-lg: 26px;
  --radius-xl: 36px;
  --shadow-soft: 0 25px 50px rgba(31, 27, 22, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: radial-gradient(circle at top, #fffef9 0%, #f4efe8 45%, #ede5db 100%);
  color: var(--text);
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.8) 0%, transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(225, 213, 197, 0.55) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(186, 205, 197, 0.35) 0%, transparent 45%);
  opacity: 0.6;
  pointer-events: none;
}

.page {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 96px;
}

.tiny-pill {
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.8);
  color: var(--muted);
}

:root[data-theme="dark"] {
  --bg: #16130f;
  --bg-alt: #1c1712;
  --text: #f1e9dd;
  --muted: #b2a695;
  --accent: #d99567;
  --accent-strong: #e6ab7d;
  --accent-warm: #d99567;
  --accent-warm-strong: #e6ab7d;
  --border: rgba(255, 255, 255, 0.12);
  --card: rgba(35, 30, 24, 0.82);
  --shadow-soft: 0 25px 50px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] body {
  background: radial-gradient(circle at top, #201a13 0%, #16120d 45%, #0f0c09 100%);
}

:root[data-theme="dark"] body::before {
  background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(217, 149, 103, 0.14) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(230, 171, 125, 0.08) 0%, transparent 45%);
}

:root[data-theme="dark"] .tiny-pill {
  background: rgba(255, 255, 255, 0.06);
}