/* Self-hosted font faces - TOP of file */
@font-face {
  font-family: "Crimson Pro";
  src: url("/static/fonts/CrimsonPro-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("/static/fonts/CrimsonPro-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Apply fonts directly - no variables, no fights */
html, body, article { font-family: "Crimson Pro", serif; }
h1,h2,h3,.page-title,.breadcrumbs,nav,button { font-family: "Crimson Pro", serif; }
code, pre { font-family: "IBM Plex Mono", ui-monospace, monospace; }

body { 
  font-synthesis: none; 
  font-size: 19px;
  font-weight: 400;
  line-height: 1.45;
}

/* Dark Academia OKLCH Color System - 2025 */
@layer base {
  :root {
    /* Light mode: Rich paper tones with sufficient contrast */
    --light: oklch(96% 0.015 75);      /* Warm cream paper */
    --lightgray: oklch(85% 0.02 65);   /* Soft taupe */
    --gray: oklch(70% 0.025 60);       /* Medium warm gray */
    --darkgray: oklch(45% 0.03 55);    /* Deep warm gray */
    --dark: oklch(20% 0.035 50);       /* Rich dark brown - WCAG AA compliant */
    --accent: oklch(50% 0.08 185);     /* Keep the beloved teal */
    
    /* UI elements with subtle warmth */
    --ui-border: oklch(82% 0.02 70);
    --ui-bg: oklch(92% 0.01 75);
    
    /* Semantic colors for better hierarchy */
    --secondary: oklch(40% 0.04 55);   /* Darker brown for secondary text */
    --tertiary: var(--accent);         /* Use accent for tertiary - unified teal */
    --highlight: oklch(from var(--accent) l c h / 0.25); /* Accent-based highlight */
  }
  
  /* Dark mode: True dark academia with softer text */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --light: oklch(8% 0.02 45);       /* Rich dark background */
      --lightgray: oklch(18% 0.02 50);  /* Dark warm gray */
      --gray: oklch(40% 0.025 55);      /* Medium warm gray */
      --darkgray: oklch(62% 0.02 60);   /* Light warm gray */
      --dark: oklch(85% 0.015 65);      /* Soft warm white - not harsh */
      --accent: oklch(68% 0.08 185);    /* Brighter teal for dark mode */
      
      --ui-border: oklch(20% 0.025 50);
      --ui-bg: oklch(12% 0.02 45);
      
      --secondary: oklch(70% 0.02 60);  /* Lighter secondary for dark mode */
      --tertiary: var(--accent);         /* Use accent for tertiary - unified teal */
    }
  }
}

/* User choice ALWAYS wins */
:root[data-theme="light"] {
  --light: oklch(96% 0.015 75);
  --lightgray: oklch(85% 0.02 65);
  --gray: oklch(70% 0.025 60);
  --darkgray: oklch(45% 0.03 55);
  --dark: oklch(20% 0.035 50);
  --accent: oklch(50% 0.08 185);
  --ui-border: oklch(82% 0.02 70);
  --ui-bg: oklch(92% 0.01 75);
  --secondary: oklch(40% 0.04 55);
  --tertiary: var(--accent);
}

:root[data-theme="dark"] {
  --light: oklch(8% 0.02 45);
  --lightgray: oklch(18% 0.02 50);
  --gray: oklch(40% 0.025 55);
  --darkgray: oklch(62% 0.02 60);
  --dark: oklch(85% 0.015 65);
  --accent: oklch(68% 0.08 185);
  --ui-border: oklch(20% 0.025 50);
  --ui-bg: oklch(12% 0.02 45);
  --secondary: oklch(70% 0.02 60);
  --tertiary: var(--accent);
}

/* Headlines that actually create hierarchy */
h1 { 
  font-size: 2.4em;
  font-weight: 300; /* Light weight at large size */
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h2 {
  font-size: 1.4em;
  font-weight: 600;
  margin-top: 2em;
}

h3 {
  font-size: 1.2em;
  font-weight: 600;
  margin-top: 1.5em;
}

/* Body text with proper contrast and personality */
body {
  background-color: var(--light);
  color: var(--dark);
  /* Ensure smooth font rendering across all browsers */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

article {
  font-size: 19px;
  font-weight: 400;
  color: var(--dark); /* Explicit color for better contrast */
}

article p {
  margin-bottom: 0.75em;
  text-wrap: pretty; /* 2025: better line breaks */
  color: var(--dark);
}

/* Unified accent color for all link states */
a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent);
}

/* Text selection highlighting with proper contrast */
::selection {
  background-color: oklch(from var(--accent) l c h / 0.25); /* Accent color with 25% opacity */
  color: var(--dark); /* Ensure text remains readable */
}

::-moz-selection {
  background-color: oklch(from var(--accent) l c h / 0.25);
  color: var(--dark);
}

/* Search button - positioned with other header buttons */
.search {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.5rem;
  position: relative;
  height: 20px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.search svg {
  width: 20px;
  height: 20px;
  fill: var(--darkgray);
  transition: opacity 0.1s ease;
}

/* Hide the "Search" text, show only icon */
.search p {
  display: none;
}

/* Make backlinks subtle, not dominant */
.backlinks {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ui-border);
}

.backlinks h3 {
  font-size: 0.9em;
  font-weight: 500;
  color: var(--darkgray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.backlinks ul {
  list-style: none;
  padding: 0;
}

.backlinks li {
  padding: 0.25em 0;
  font-size: 0.95em;
}

/* NetLogo embed styling */
.netlogo-embed {
  margin: 2rem 0;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  overflow: hidden;
}

.netlogo-embed iframe {
  width: 100%;
  height: 600px;
  border: none;
}

/* View Transitions - Crossfade everything except persistent UI */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 250ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keep header/nav stable */
header {
  view-transition-name: header;
}

/* Keep sidebar elements stable during theme transitions */
.explorer, .toc, .tag-explorer {
  view-transition-name: none;
}

/* Prevent any transitions on sidebar text during theme changes */
.explorer *, .toc *, .tag-explorer * {
  transition: none !important;
}

/* Lazy loading for all images */
img {
  loading: lazy;
  decoding: async;
}

/* Content width override */
:root {
  --content-width: 750px;
  --right-sidebar-width: 250px;
}

/* Fix Explorer Sidebar - Remove Blue Colors and Bold Text */
.explorer-content {
  /* Override Quartz's blue secondary color for sidebar links */
  
  & ul li > a {
    color: var(--dark) !important;
    opacity: 0.85 !important; /* Match consistent opacity */
    font-weight: 400 !important; /* Normal weight, not bold */
    font-family: "Crimson Pro", serif !important; /* Serif for consistency */
    font-size: 0.9rem !important; /* Explicit size override */
    line-height: 1.4;
    
    &:hover {
      opacity: 1 !important;
      color: var(--accent);
    }
    
    &.active {
      opacity: 1 !important;
      color: var(--accent);
    }
  }
}

/* Fix folder container styling */
.folder-container {
  /* Folder names (like "Core Concepts") */
  & div > a {
    color: var(--darkgray) !important; /* Slightly muted for hierarchy */
    font-weight: 500 !important;      /* Medium weight, not semibold */
    font-size: 0.9rem !important;
    font-family: "Crimson Pro", serif !important; /* Use serif, not headerFont */
    opacity: 0.9;
    
    &:hover {
      color: var(--dark) !important;
      opacity: 1;
    }
  }
  
  /* Folder buttons */
  & div > button span {
    color: var(--darkgray) !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    font-family: "Crimson Pro", serif !important; /* Use serif, not headerFont */
  }
  
  /* Folder icons */
  .folder-icon {
    color: var(--gray) !important;
    
    &:hover {
      color: var(--accent) !important;
    }
  }
}

/* Ensure consistent visual hierarchy in sidebar */
.explorer {
  /* Top-level items - consistent size and opacity */
  & > .explorer-content > ul > li > .folder-container a,
  & > .explorer-content > ul > li > a {
    font-size: 0.9rem !important; /* Match TOC size for consistency */
    font-family: "Crimson Pro", serif !important;
    font-weight: 400 !important; /* Normal weight for consistency */
    opacity: 0.85 !important; /* Match TOC opacity */
    
    &:hover {
      opacity: 1 !important;
    }
  }
  
  /* Nested items smaller for hierarchy */
  .folder-outer ul li a {
    font-size: 0.85rem !important;
    font-family: "Crimson Pro", serif !important;
    font-weight: 400 !important;
    opacity: 0.85 !important; /* Consistent with top-level */
    
    &:hover {
      opacity: 1 !important;
    }
  }
  
  /* Third level and deeper even smaller */
  .folder-outer .folder-outer ul li a {
    font-size: 0.8rem !important;
    font-family: "Crimson Pro", serif !important;
    font-weight: 400 !important;
    opacity: 0.85 !important; /* Consistent opacity across all levels */
    
    &:hover {
      opacity: 1 !important;
    }
  }
}

/* Fix Table of Contents - Remove Progressive Dimming and Bold Fonts */
.toc {
  /* TOC header */
  button.toc-header h3 {
    font-family: "Crimson Pro", serif !important;
    font-weight: 500 !important; /* Medium weight, not bold */
  }
}

ul.toc-content.overflow {
  /* Remove progressive dimming - all TOC items same opacity */
  & > li > a {
    color: var(--dark) !important;
    opacity: 0.85 !important; /* Match left sidebar consistency */
    font-family: "Crimson Pro", serif !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important; /* Much smaller - TOC shouldn't compete with body text */
    transition: none !important; /* Remove opacity transitions */
    
    &:hover {
      opacity: 1 !important;
      color: var(--accent) !important;
    }
    
    &.in-view {
      opacity: 0.85 !important; /* Same as default, no special highlighting */
    }
  }
}

/* Fix inconsistent fonts in left sidebar - make everything serif */
.explorer-content ul li {
  /* Regular page links like "About", "Graph" etc */
  & > a {
    font-family: "Crimson Pro", serif !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important; /* Consistent size */
    opacity: 0.85 !important; /* Consistent opacity */
    
    &:hover {
      opacity: 1 !important;
    }
  }
  
  /* Make sure nested items also use serif */
  ul li a {
    font-family: "Crimson Pro", serif !important;
    font-weight: 400 !important;
    opacity: 0.85 !important; /* Consistent opacity for nested items too */
    
    &:hover {
      opacity: 1 !important;
    }
  }
}