/* ─── THEME VARIABLES ─────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg:        #0e1218;
  --bg2:       #161c24;
  --bg3:       #1e2630;
  --bg4:       #263040;
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.13);

  --amber:     #E8A020;
  --amber-dim: rgba(232,160,32,0.13);
  --amber-txt: #F5BE60;

  --t1: #F0EDE8;
  --t2: #9A9690;
  --t3: #5C5A56;

  --shadow: 0 8px 32px rgba(0,0,0,0.45);
  --overlay: rgba(0,0,0,0.55);

  color-scheme: dark;
}

[data-theme="light"] {
  --bg:        #F5F2EC;
  --bg2:       #EDE9E0;
  --bg3:       #E2DDD3;
  --bg4:       #D4CEC3;
  --border:    rgba(0,0,0,0.07);
  --border2:   rgba(0,0,0,0.13);

  --amber:     #B87010;
  --amber-dim: rgba(184,112,16,0.1);
  --amber-txt: #8A5200;

  --t1: #1A1714;
  --t2: #706C66;
  --t3: #AAA69E;

  --shadow: 0 8px 32px rgba(0,0,0,0.12);
  --overlay: rgba(0,0,0,0.4);

  color-scheme: light;
}

/* ─── RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--t1);
  background: var(--bg);
  min-height: 100dvh;
  transition: background .25s, color .25s;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* ─── SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

/* ─── CONTAINER ─────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ─── TYPOGRAPHY ────────────────────────────────────────── */
.serif { font-family: Georgia, 'Times New Roman', serif; }
.t1 { color: var(--t1); }
.t2 { color: var(--t2); }
.t3 { color: var(--t3); }
.amber { color: var(--amber); }

/* ─── UTILITY ───────────────────────────────────────────── */
.flex  { display: flex; }
.fc    { flex-direction: column; }
.ac    { align-items: center; }
.jc    { justify-content: center; }
.jsb   { justify-content: space-between; }
.gap4  { gap: 4px; }
.gap8  { gap: 8px; }
.gap12 { gap: 12px; }
.gap16 { gap: 16px; }
.w100  { width: 100%; }
.mt8   { margin-top: 8px; }
.mt12  { margin-top: 12px; }
.mt16  { margin-top: 16px; }
.mt24  { margin-top: 24px; }
.mb8   { margin-bottom: 8px; }
.mb12  { margin-bottom: 12px; }
.mb16  { margin-bottom: 16px; }
.mb24  { margin-bottom: 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── MAIN CONTENT OFFSET ──────────────────────────────── */
.page-content {
  padding-top: 60px;   /* top nav height */
  padding-bottom: 80px; /* bottom nav height */
  min-height: 100dvh;
}