/* theme.css — shared design tokens for share-some-html */
/* Derived colors use CSS relative color syntax (oklch + from) */

:root {
  /* ── Base semantic colors ── */
  --brand: #4059e5;
  --success: #16a34a;
  --danger: #c53030;
  --attention: #b45309;
  --caution: #ca8a04;

  /* ── Brand derived ── */
  --brand-hover: oklch(from var(--brand) calc(l - 0.06) c h);
  --brand-light: oklch(from var(--brand) l c h / 0.08);
  --brand-ring: oklch(from var(--brand) l c h / 0.18);
  --brand-subtle: oklch(from var(--brand) l c h / 0.04);
  --brand-selection: oklch(from var(--brand) l c h / 0.06);
  --brand-muted: oklch(from var(--brand) calc(l + 0.25) c h);

  /* ── Danger derived ── */
  --danger-hover: oklch(from var(--danger) calc(l - 0.06) c h);
  --danger-light: oklch(from var(--danger) calc(l + 0.15) c h);
  --danger-bg: oklch(from var(--danger) calc(l + 0.35) calc(c * 0.3) h);
  --danger-border: oklch(from var(--danger) l c h / 0.3);
  --danger-text: oklch(from var(--danger) calc(l - 0.2) c h);
  --danger-subtle: oklch(from var(--danger) l c h / 0.06);

  /* ── Success derived ── */
  --success-bg: oklch(from var(--success) calc(l + 0.35) calc(c * 0.3) h);
  --success-border: oklch(from var(--success) calc(l + 0.25) calc(c * 0.5) h);
  --success-subtle: oklch(from var(--success) l c h / 0.08);

  /* ── Attention derived ── */
  --attention-bg: oklch(from var(--attention) calc(l + 0.3) calc(c * 0.4) h);
  --attention-text: oklch(from var(--attention) calc(l - 0.1) c h);

  /* ── Diff colors ── */
  --diff-add: oklch(from var(--success) calc(l + 0.3) calc(c * 0.4) h / 0.35);
  --diff-remove: oklch(from var(--danger) calc(l + 0.3) calc(c * 0.4) h / 0.35);
  --diff-empty: oklch(from #000 l c h / 0.03);

  /* ── Neutrals ── */
  --text: #111827;
  --text-2: #374151;
  --text-3: #4b5563;
  --text-4: #6b7280;
  --border: #d1d5db;
  --border-2: #9ca3af;
  --border-light: #e5e7eb;
  --border-faint: #f0f0f0;
  --bg-page: #f2f3f5;
  --bg-card: #fff;
  --bg-input: #f9fafb;
  --bg-hover: #f3f4f6;
  --bg-muted: #e5e7eb;

  /* ── Shadows ── */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-overlay: 0 12px 40px rgba(0,0,0,0.2);

  /* ── Typography ── */
  --mono: "SF Mono", "Fira Code", "Cascadia Code", "Menlo", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;

  /* ── Radii ── */
  --radius: 10px;
  --radius-lg: 20px;
}

/* ══════════════════════════════════════ */
/* ── Dark mode overrides ── */
/* ══════════════════════════════════════ */
.dark {
  --brand: #6b8aff;
  --success: #4ade80;
  --danger: #f87171;
  --attention: #fbbf24;
  --caution: #facc15;

  --text: #f3f4f6;
  --text-2: #d1d5db;
  --text-3: #9ca3af;
  --text-4: #7c8594;
  --border: #374151;
  --border-2: #4b5563;
  --border-light: #1f2937;
  --border-faint: #1f2937;
  --bg-page: #0f1117;
  --bg-card: #1a1d2e;
  --bg-input: #1f2335;
  --bg-hover: #252a3a;
  --bg-muted: #374151;

  --shadow-card: 0 1px 3px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-overlay: 0 12px 40px rgba(0,0,0,0.5);
}

/* ══════════════════════════════════════ */
/* ── Theme toggle (bottom-left corner) ── */
/* ══════════════════════════════════════ */
#theme-toggle-wrap {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9999;
}
#theme-toggle {
  width: 64px; height: 26px; border-radius: 20% / 50%; overflow: hidden; cursor: pointer; position: relative;
  box-shadow: 0px 1px 2px 1px rgba(255,255,255,0.6), 0px -1px 2px 1px rgba(0,0,0,0.4);
  background: #3284bd; transition: background 0.3s; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dark #theme-toggle { background: #202335; }
#theme-toggle::before {
  content: ''; position: absolute; inset: 0; border-radius: 20% / 50%;
  box-shadow: inset 1px 1px 3px 1px rgba(0,0,0,0.75); z-index: 3; pointer-events: none;
}
#stellar {
  height: 250%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(255,255,255,.3), rgba(255,255,255,.3) 37%, rgba(255,255,255,.2) 37%, rgba(255,255,255,.2) 51%, rgba(255,255,255,.1) 51%, rgba(255,255,255,.1) 65%, rgba(255,255,255,0) 65%);
  transform: translateX(-29%); transition: all 0.3s cubic-bezier(.26,.53,.74,1.1); z-index: 1; flex-shrink: 0;
}
.dark #stellar {
  transform: translateX(29%);
  background: radial-gradient(circle, rgba(255,255,255,.3), rgba(255,255,255,.3) 31%, rgba(255,255,255,.2) 31%, rgba(255,255,255,.2) 44%, rgba(255,255,255,.1) 44%, rgba(255,255,255,.1) 57%, rgba(255,255,255,0) 57%);
}
#sun {
  z-index: 1; width: 30%; height: 30%; background: #fac641; border-radius: 50%; overflow: hidden;
  box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4), inset 2px 2px 3px 1px rgba(255,255,255,0.6), inset 0px -1px 3px 1px rgba(0,0,0,0.6);
  transition: all 0.3s cubic-bezier(.26,.53,.74,1.1);
}
#moon {
  height: 100%; width: 100%; margin-left: 110%; opacity: 0.7; background: #cdcfd7; border-radius: 50%;
  box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4), inset 1px 1px 3px 2px rgba(255,255,255,0.9), inset 0px -1px 3px 1px rgba(0,0,0,0.6);
  transition: transform 0.3s cubic-bezier(.26,.53,.74,1.1), margin-left 0.3s cubic-bezier(.26,.53,.74,1.1), opacity 0.3s;
  display: block; transform: rotate(-0.04turn);
}
.dark #moon { transform: rotate(0); margin-left: 0%; opacity: 1; }
.crater { position: relative; border-radius: 50%; background: #a0a8bb; box-shadow: inset 0px 1px 1px 1px rgba(0,0,0,0.05); }
#crater-1 { width: 35%; height: 35%; left: 17%; top: 40%; }
#crater-2 { width: 20%; height: 20%; left: 40%; top: -20%; }
#crater-3 { width: 20%; height: 20%; left: 60%; top: 5%; }

/* ══════════════════════════════════════ */
/* ── Pagination ── */
/* ══════════════════════════════════════ */
nav.pagination {
  margin-top: 20px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
nav.pagination .page-arrow {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--bg-card); border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-3); padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
nav.pagination a.page-arrow { text-decoration: none; }
nav.pagination .page-arrow:hover { background: var(--bg-hover); color: var(--text); }
nav.pagination .page-arrow[aria-disabled="true"] {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
nav.pagination .page-nums {
  display: flex; align-items: center; gap: 2px; padding: 0 4px;
}
nav.pagination .page-num {
  min-width: 32px; height: 32px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; color: var(--text-3);
  background: transparent; border: none; padding: 0 6px;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
nav.pagination a.page-num:hover {
  background: var(--bg-hover); color: var(--text);
}
nav.pagination .page-num--active {
  background: var(--brand); color: #fff;
  cursor: default; pointer-events: none;
}
nav.pagination .page-ellipsis {
  min-width: 24px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--text-4); pointer-events: none;
  user-select: none;
}