/* ==========================================================================
   StudyDump - Academic Notebook & Editorial Study Library Tokens
   Warm, Calm, Typographic, and Restrained
   ========================================================================== */

/* Typography tokens use Google Fonts (Outfit & JetBrains Mono) linked via preconnect in HTML */
:root {
  /* Typography - Outfit (Matching user reference image) + JetBrains Mono (Code/Mono) */
  --font-editorial: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Scales */
  --text-3xs: 0.6875rem;
  /* 11px */
  --text-2xs: 0.75rem;
  /* 12px */
  --text-xs: 0.8125rem;
  /* 13px */
  --text-sm: 0.875rem;
  /* 14px */
  --text-base: 0.96875rem;
  /* 15.5px */
  --text-md: 1.0625rem;
  /* 17px */
  --text-lg: 1.25rem;
  /* 20px */
  --text-xl: 1.45rem;
  /* 23px */
  --text-2xl: 1.85rem;
  /* 29.5px */
  --text-3xl: 2.35rem;
  /* 37.5px */
  --text-4xl: 2.85rem;
  /* 45.6px */

  /* Leading */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.38;
  --leading-normal: 1.65;
  --leading-loose: 1.8;

  /* Generous Section Spacing (Calm, relaxed reading pace) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Widths */
  --container-max: 760px;
  /* Refined editorial reading width for home & subject */
  --reading-max: 68ch;
  --toc-width: 220px;

  /* Safe Area Insets for Mobile / Notched Displays */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Touch Ergonomics Minimum Tap Target */
  --touch-min: 44px;

  /* Subtle Radii */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 140ms ease-out;
  --transition-normal: 220ms ease-out;

  /* Light Mode (Warm Off-White Academic Paper / Ink) */
  --bg-app: #f7f6f2;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-elevated: #ffffff;
  --bg-surface-subtle: #eceae4;
  --bg-code: #f0eee6;

  --text-primary: #181818;
  --text-secondary: #5e5d59;
  --text-tertiary: #85837c;
  --text-quaternary: #adaba4;
  --text-inverse: #f7f6f2;

  --border-subtle: #eae7df;
  --border-default: #dedbd2;
  --border-strong: #bcbaaf;

  /* Restrained Academic Cobalt Accent */
  --accent: #285582;
  --accent-hover: #1c3f63;
  --accent-subtle: #edf3f8;
  --accent-border: #c8d9ea;

  /* Scholarly Callout Tones */
  --callout-important-border: #b83a2b;
  --callout-definition-border: #285582;
  --callout-example-border: #2f6946;
  --callout-note-border: #62656d;
  --callout-remember-border: #996216;
  --callout-warning-border: #b83a2b;

  --shadow-subtle: 0 1px 2px rgba(24, 24, 24, 0.03);
  --shadow-modal: 0 16px 36px -8px rgba(24, 24, 24, 0.12), 0 0 0 1px var(--border-default);
  --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 3.5px var(--accent);
}

/* Dark Mode (Deep Charcoal / Ink-Like Base) */
[data-theme="dark"] {
  --bg-app: #0d0f12;
  --bg-surface: #15181d;
  --bg-surface-elevated: #1b1f25;
  --bg-elevated: #1b1f25;
  --bg-surface-subtle: #1f232b;
  --bg-code: #13161b;

  --text-primary: #d9dce2;
  --text-secondary: #8b909a;
  --text-tertiary: #616670;
  --text-quaternary: #454950;
  --text-inverse: #0d0f12;

  --border-subtle: #191c22;
  --border-default: #22262e;
  --border-strong: #333842;

  /* Restrained Dusty Cobalt in Dark Mode */
  --accent: #7ba7d9;
  --accent-hover: #98beec;
  --accent-subtle: rgba(123, 167, 217, 0.12);
  --accent-border: rgba(123, 167, 217, 0.28);

  --callout-important-border: #e06050;
  --callout-definition-border: #7ba7d9;
  --callout-example-border: #52a674;
  --callout-note-border: #8b909a;
  --callout-remember-border: #d49c3b;
  --callout-warning-border: #e06050;

  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-modal: 0 20px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--border-default);
  --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 3.5px var(--accent);
}

/* ==========================================================================
   Universal Metadata Separator Dots
   Renders bold, distinct dots to visually separate metadata terms
   ========================================================================== */

.dot-sep,
.meta-dot {
  display: inline-block;
  margin: 0 0.5rem;
  font-weight: 800;
  font-size: 1.15em;
  line-height: 1;
  color: var(--text-tertiary);
  vertical-align: middle;
  user-select: none;
}

.intro-subheading {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: var(--space-3);
  letter-spacing: 0.01em;
}

.intro-subheading .dot-sep {
  margin: 0 0.65rem;
  font-weight: 900;
  font-size: 1.25em;
  color: var(--accent);
}

/* ==========================================================================
   Critical Immediate Loading Screen CSS (Zero Flash Guarantee)
   ========================================================================== */

.site-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  background-color: #090d16;
  background-color: var(--bg-app, #090d16);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease;
  pointer-events: all;
}

.site-page-loader.is-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

}