/* =========================================
   base.css - reset, theme tokens, document typography
   Extracted verbatim from the pre-refactor style.css (QUO-34, OCW-5).
   Source: style.css lines 1-133. Loaded first: every other sheet depends on these custom properties.
   ========================================= */

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

/* =========================================
   Theme Custom Properties (Dark Default & Anthropic Light)
   ========================================= */
:root {
  /* Dark Mode Palette (Default) */
  --bg-top-layer: #101010;
  --border-content-frame: rgba(255, 255, 255, 0.12);
  --border-content-glow: rgba(255, 255, 255, 0.03);

  --nav-icon-color: rgba(226, 228, 233, 0.85);
  --nav-icon-hover-color: rgba(255, 255, 255, 0.98);
  --nav-icon-hover-bg: rgba(255, 255, 255, 0.07);

  --sidebar-text: rgba(226, 228, 233, 0.85);
  --sidebar-text-hover: rgba(255, 255, 255, 0.98);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-active-text: #ffffff;
  --sidebar-active-bg: rgba(255, 255, 255, 0.12);

  --advert-bg: #0d0d10;
  --advert-border: rgba(255, 255, 255, 0.08);
  --advert-text: rgba(226, 228, 233, 0.72);
  --advert-dot: rgba(255, 255, 255, 0.25);

  --dark-section-bg: #060606;
  --effect-layer-bg: #101010;
  --footer-bg: #060606;

  /* Modal in Dark Mode: Crystal clear illuminated overlay so background & globe remain 100% visible! */
  --modal-backdrop-bg: rgba(255, 255, 255, 0.04);
  --modal-backdrop-blur: 1px;
  --modal-dialog-bg: rgba(18, 18, 22, 0.88);
  --modal-dialog-border: rgba(255, 255, 255, 0.14);
  --modal-dialog-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.2);
  --modal-close-bg: rgba(255, 255, 255, 0.08);
  --modal-close-border: rgba(255, 255, 255, 0.12);
  --modal-close-color: rgba(226, 228, 233, 0.85);

  --sidebar-mobile-bg: rgba(12, 12, 14, 0.96);
  --sidebar-mobile-border: rgba(255, 255, 255, 0.12);
  --sidebar-mobile-shadow: 0 16px 36px rgba(0, 0, 0, 0.85);

  /* Toggle switch tokens in Dark Mode */
  --toggle-track-bg: rgba(255, 255, 255, 0.08);
  --toggle-track-border: rgba(255, 255, 255, 0.14);
  --toggle-track-hover-border: rgba(255, 255, 255, 0.28);
  --toggle-thumb-bg: #1c1c22;
  --toggle-thumb-border: rgba(255, 255, 255, 0.18);
  --toggle-thumb-shadow: rgba(0, 0, 0, 0.6);
  --toggle-sun-color: rgba(226, 228, 233, 0.35);
  --toggle-moon-color: #ffffff;
}

[data-theme="light"] {
  /* Warm Dark Stone / Graphite Palette (Carefully calibrated dark theme, zero glare) */
  --bg-top-layer: #2a2825; /* Deep warm stone canvas */
  --border-content-frame: rgba(255, 255, 255, 0.15); /* Clean architectural frame */
  --border-content-glow: rgba(255, 255, 255, 0.04);

  --nav-icon-color: rgba(235, 230, 222, 0.85);
  --nav-icon-hover-color: #ffffff;
  --nav-icon-hover-bg: rgba(255, 255, 255, 0.08);

  --sidebar-text: rgba(235, 230, 222, 0.85);
  --sidebar-text-hover: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-active-text: #ffffff;
  --sidebar-active-bg: rgba(255, 255, 255, 0.14);

  --advert-bg: #211f1c; /* Distinct dark stone separator bar */
  --advert-border: rgba(255, 255, 255, 0.08);
  --advert-text: rgba(235, 230, 222, 0.75);
  --advert-dot: rgba(255, 255, 255, 0.22);

  --dark-section-bg: #181715; /* Deep charcoal/stone middle layer */
  --effect-layer-bg: #2a2825; /* Matches Top Layer stone */
  --footer-bg: #121110; /* Deep dark stone base */

  /* Modal in Dark Stone Mode */
  --modal-backdrop-bg: rgba(0, 0, 0, 0.35);
  --modal-backdrop-blur: 1px;
  --modal-dialog-bg: rgba(38, 36, 33, 0.94);
  --modal-dialog-border: rgba(255, 255, 255, 0.14);
  --modal-dialog-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.15);
  --modal-close-bg: rgba(255, 255, 255, 0.08);
  --modal-close-border: rgba(255, 255, 255, 0.12);
  --modal-close-color: rgba(235, 230, 222, 0.85);

  --sidebar-mobile-bg: rgba(38, 36, 33, 0.96);
  --sidebar-mobile-border: rgba(255, 255, 255, 0.12);
  --sidebar-mobile-shadow: 0 16px 36px rgba(0, 0, 0, 0.75);

  /* Toggle switch tokens in Dark Stone Mode */
  --toggle-track-bg: rgba(0, 0, 0, 0.4);
  --toggle-track-border: rgba(255, 255, 255, 0.16);
  --toggle-track-hover-border: rgba(255, 255, 255, 0.3);
  --toggle-thumb-bg: #44403a;
  --toggle-thumb-border: rgba(255, 255, 255, 0.22);
  --toggle-thumb-shadow: rgba(0, 0, 0, 0.5);
  --toggle-sun-color: #ffffff;
  --toggle-moon-color: rgba(255, 255, 255, 0.35);
}

html {
  width: 100%;
  background-color: var(--bg-top-layer);
  scroll-behavior: smooth;
  transition: background-color 0.25s ease;
}

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--bg-top-layer);
  overflow-x: hidden;
  overflow-y: auto; /* Natural smooth vertical page scrolling */
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  transition: background-color 0.25s ease;
}