/* ==========================================================================
   📜 UGC NET PAPER ONE — DESIGN SYSTEM & TOKENS (index.css)
   ========================================================================== */

@import url('print.css') print;

:root {
  /* Color Palette */
  --parchment:       #f5f0e1;
  --parchment-dark:  #e8dcc8;
  --vellum:          #faf7f0;
  --ink:             #3b2f1e;
  --ink-light:       #6b5b47;
  --accent-gold:     #b8860b;
  --accent-crimson:  #8b1a1a;
  --shadow-color:    rgba(42, 31, 20, 0.15);
  --shadow-deep:     0 10px 30px rgba(42, 31, 20, 0.25);
  --shadow-light:    0 2px 8px rgba(42, 31, 20, 0.1);
  --border-ink:      1px solid var(--ink);
  --border-gold:     1px solid var(--accent-gold);
  --border-double:   3px double var(--accent-gold);

  /* Layout */
  --sidebar-width:      300px;
  --max-content-width:  860px;
  --transition-speed:   0.3s;
  --topbar-height:      56px;

  /* Spacing */
  --space-xs: 0.25rem; --space-sm: 0.5rem;
  --space-md: 1rem;    --space-lg: 1.5rem;
  --space-xl: 2rem;    --space-2xl: 3rem;
}

/* Dark Sepia Night Mode */
[data-theme="dark"] {
  --parchment:      #1e1811;
  --parchment-dark: #15100a;
  --vellum:         #2a2015;
  --ink:            #f5f0e1;
  --ink-light:      #b8a994;
  --accent-gold:    #d4af37;
  --accent-crimson: #e07070;
  --shadow-color:   rgba(0, 0, 0, 0.5);
  --shadow-deep:    0 10px 30px rgba(0, 0, 0, 0.6);
  --shadow-light:   0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] svg {
  filter: invert(0.85) hue-rotate(180deg);
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* DO NOT set height:100% here — that locks the page height to the viewport
     and prevents natural document scrolling on mobile */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--parchment);
}

body {
  /* min-height (NOT height) — allows body to grow taller than viewport */
  min-height: 100vh;
  background-color: var(--parchment);
  color: var(--ink);
  scrollbar-color: var(--ink-light) var(--parchment-dark);
  scrollbar-width: thin;
  /* Parchment texture */
  background-image:
    radial-gradient(circle at center, transparent 30%, var(--shadow-color) 100%),
    repeating-linear-gradient(rgba(0,0,0,0.01) 0px, rgba(0,0,0,0.01) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.01) 0px, rgba(0,0,0,0.01) 1px, transparent 1px, transparent 4px);
  background-attachment: fixed;
}

/* ── Scrollbars ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--parchment-dark); }
::-webkit-scrollbar-thumb {
  background: var(--ink-light);
  border: 2px solid var(--parchment-dark);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink); }

/* ── Interactive elements ───────────────────────────────────────── */
a, button, select, input[type="submit"], label { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Utilities ──────────────────────────────────────────────────── */
.hidden { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ── Smooth theme transitions ───────────────────────────────────── */
body,
.sidebar-toc,
.manuscript-wrapper,
.top-toolbar,
.marginalia,
.quiz-question,
.option-item {
  transition:
    background-color var(--transition-speed) ease,
    color            var(--transition-speed) ease,
    border-color     var(--transition-speed) ease;
}