/* ============================================
   OBSIDIAN PUBLISH - DUAL THEME
   Tokyo Night (Dark) + Gruvbox Material (Light)
   ============================================ */

/* Published Container - Layout variables that don't change with theme */
.published-container {
    --page-width: 800px;
    --page-side-padding: 48px;
    --page-margin: 32px;
    
    /* Readable line width */
    --file-line-width: 700px;
    --line-width: 40rem;
    --line-width-adaptive: 40rem;
    
    /* Font settings */
    --font-text-size: 16px;
    --font-smallest: 0.8em;
    --font-smaller: 0.875em;
    --font-small: 0.933em;
    --font-ui-smaller: 13px;
    --font-ui-small: 14px;
    --font-ui-medium: 15px;
    
    /* Spacing */
    --size-2-1: 2px;
    --size-2-2: 4px;
    --size-2-3: 6px;
    --size-4-1: 8px;
    --size-4-2: 12px;
    --size-4-3: 16px;
    --size-4-4: 20px;
    --size-4-5: 24px;
    --size-4-6: 28px;
    --size-4-8: 32px;
    --size-4-12: 48px;
    --size-4-16: 64px;
    
    /* Border radius */
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 12px;
    --radius-xl: 16px;
  }
  
  /* Root variables - Gruvbox Material color palette */
  :root {
    /* Dark theme colors */
    --dark0-hard-x: 29, 32, 33;
    --dark0-hard: rgb(var(--dark0-hard-x));
    --dark0-x: 40, 40, 40;
    --dark0: rgb(var(--dark0-x));
    --dark0-soft-x: 50, 48, 47;
    --dark0-soft: rgb(var(--dark0-soft-x));
    --dark1-x: 60, 56, 54;
    --dark1: rgb(var(--dark1-x));
    --dark2-x: 80, 73, 69;
    --dark2: rgb(var(--dark2-x));
    --dark3-x: 102, 92, 84;
    --dark3: rgb(var(--dark3-x));
    --dark4-x: 124, 111, 100;
    --dark4: rgb(var(--dark4-x));
    --gray-x: 146, 131, 116;
    --gray: rgb(var(--gray-x));
    --dark-text-x: 101, 71, 53;
    --dark-text: rgb(var(--dark-text-x));
    --dark-text-faint-x: 179, 126, 93;
    --dark-text-faint: rgb(var(--dark-text-faint-x));
    --dark-text-muted-x: 115, 81, 69;
    --dark-text-muted: rgb(var(--dark-text-muted-x));
  
    /* Light theme colors */
    --light0-hard-x: 249, 245, 215;
    --light0-hard: rgb(var(--light0-hard-x));
    --light0-x: 251, 241, 199;
    --light0: rgb(var(--light0-x));
    --light0-soft-x: 242, 229, 188;
    --light0-soft: rgb(var(--light0-soft-x));
    --light1-x: 235, 219, 178;
    --light1: rgb(var(--light1-x));
    --light2-x: 213, 196, 161;
    --light2: rgb(var(--light2-x));
    --light3-x: 189, 174, 147;
    --light3: rgb(var(--light3-x));
    --light4-x: 168, 153, 132;
    --light4: rgb(var(--light4-x));
    --light-text-x: 212, 190, 152;
    --light-text: rgb(var(--light-text-x));
  
    /* Neutral colors */
    --neutral-red-x: 234, 105, 98;
    --neutral-red: rgb(var(--neutral-red-x));
    --neutral-green-x: 169, 182, 101;
    --neutral-green: rgb(var(--neutral-green-x));
    --neutral-yellow-x: 231, 138, 78;
    --neutral-yellow: rgb(var(--neutral-yellow-x));
    --neutral-blue-x: 125, 174, 163;
    --neutral-blue: rgb(var(--neutral-blue-x));
    --neutral-purple-x: 211, 134, 155;
    --neutral-purple: rgb(var(--neutral-purple-x));
    --neutral-aqua-x: 137, 180, 130;
    --neutral-aqua: rgb(var(--neutral-aqua-x));
  
    /* Faded colors */
    --faded-red-x: 193, 74, 74;
    --faded-red: rgb(var(--faded-red-x));
    --faded-green-x: 108, 120, 46;
    --faded-green: rgb(var(--faded-green-x));
    --faded-yellow-x: 195, 94, 10;
    --faded-yellow: rgb(var(--faded-yellow-x));
    --faded-blue-x: 69, 112, 122;
    --faded-blue: rgb(var(--faded-blue-x));
    --faded-purple-x: 148, 94, 128;
    --faded-purple: rgb(var(--faded-purple-x));
    --faded-aqua-x: 76, 122, 93;
    --faded-aqua: rgb(var(--faded-aqua-x));
  }
  
  /* ============================================
     LIGHT MODE - GRUVBOX MATERIAL
     ============================================ */
  .theme-light {
    color-scheme: light;
    
    /* Color mappings */
    --color-red-rgb: var(--faded-red-x);
    --color-red: var(--faded-red);
    --color-purple-rgb: var(--faded-purple-x);
    --color-purple: var(--faded-purple);
    --color-green-rgb: var(--faded-green-x);
    --color-green: var(--faded-green);
    --color-cyan-rgb: var(--neutral-blue-x);
    --color-cyan: var(--neutral-blue);
    --color-blue-rgb: var(--faded-blue-x);
    --color-blue: var(--faded-blue);
    --color-yellow-rgb: var(--neutral-yellow-x);
    --color-yellow: var(--neutral-yellow);
    --color-orange-rgb: var(--faded-yellow-x);
    --color-orange: var(--faded-yellow);
    --color-pink-rgb: var(--faded-purple-x);
    --color-pink: var(--faded-purple);
  
    /* Backgrounds */
    --background-primary: var(--light0-hard);
    --background-primary-alt: var(--light0-hard);
    --background-secondary: var(--light1);
    --background-secondary-alt: var(--light1);
    --background-modifier-border: var(--light2);
    --background-accent: var(--light0-soft);
  
    /* Cursor line */
    --cursor-line-background: rgba(var(--light1-x), 0.5);
  
    /* Text colors */
    --text-normal: var(--dark-text);
    --text-faint: var(--dark-text-faint);
    --text-muted: var(--dark-text-muted);
  
    /* Heading colors */
    --h1-color: var(--faded-red);
    --h2-color: var(--faded-yellow);
    --h3-color: var(--faded-green);
    --h4-color: var(--faded-aqua);
    --h5-color: var(--faded-blue);
    --h6-color: var(--faded-purple);
  
    /* Highlight */
    --text-highlight-bg: var(--faded-yellow);
    --text-highlight-fg: var(--light0-hard);
  
    /* Accent */
    --text-accent: var(--neutral-yellow);
    --text-accent-hover: var(--faded-yellow);
  
    /* Tags */
    --tag-color: var(--faded-aqua);
    --tag-background: var(--light1);
    --tag-background-hover: rgba(var(--light1-x), 0.6);
  
    /* Title */
    --inline-title-color: var(--neutral-yellow);
  
    /* Bold & Italic */
    --bold-color: var(--faded-yellow);
    --italic-color: var(--faded-yellow);
  
    /* Checkboxes */
    --checkbox-color: var(--light4);
    --checkbox-color-hover: var(--light4);
    --checkbox-border-color: var(--light4);
    --checkbox-border-color-hover: var(--light4);
    --checklist-done-color: rgba(var(--dark2-x), 0.4);
  
    /* Tables */
    --table-header-background: rgba(var(--light3-x), 0.4);
    --table-header-background-hover: var(--light2);
    --table-row-even-background: rgba(var(--light1-x), 0.2);
    --table-row-odd-background: rgba(var(--light1-x), 0.7);
    --table-row-background-hover: var(--light2);
  
    /* Selection */
    --text-selection: rgba(var(--neutral-red-x), 0.6);
    --flashing-background: rgba(var(--neutral-red-x), 0.3);
  
    /* Code */
    --code-normal: var(--neutral-blue);
    --code-background: var(--light1);
  
    /* Icons */
    --icon-color-hover: var(--neutral-red);
    --icon-color-focused: var(--neutral-blue);
  
    /* Navigation */
    --nav-item-color-hover: var(--neutral-red);
    --nav-item-color-active: var(--faded-blue);
    --nav-file-tag: rgba(var(--faded-blue-x), 0.9);
  
    /* Graph */
    --graph-line: var(--light3);
    --graph-node: var(--gray);
    --graph-node-tag: var(--faded-red);
    --graph-node-attachment: var(--neutral-green);
  
    /* Calendar */
    --calendar-hover: var(--neutral-red);
    --calendar-background-hover: var(--light1);
    --calendar-week: var(--neutral-red);
    --calendar-today: var(--neutral-red);
  
    /* Dataview */
    --dataview-key: var(--text-faint);
    --dataview-key-background: rgba(var(--faded-red-x), 0.3);
    --dataview-value: var(--text-faint);
    --dataview-value-background: rgba(var(--neutral-green-x), 0.2);
  
    /* Tabs */
    --tab-text-color-focused-active: var(--neutral-yellow);
    --tab-text-color-focused-active-current: var(--neutral-red);
  }
  
  /* Light Mode Enhancements */
  .theme-light pre[class*="language-"] {
    background: var(--light1);
    border: 1px solid var(--light2);
    border-radius: var(--radius-m);
  }
  
  .theme-light code {
    background: var(--light1);
    color: var(--neutral-blue);
    padding: 2px 6px;
    border-radius: var(--radius-s);
  }
  
  .theme-light blockquote {
    border-left: 4px solid var(--faded-aqua);
    background: rgba(var(--neutral-aqua-x), 0.1);
    padding: var(--size-4-2) var(--size-4-3);
    border-radius: var(--radius-s);
  }
  
  .theme-light a {
    color: var(--neutral-yellow);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
  }
  
  .theme-light a:hover {
    color: var(--faded-yellow);
    border-bottom-color: var(--neutral-yellow);
  }
  
  .theme-light a.external-link {
    color: var(--faded-blue);
  }
  
  .theme-light hr {
    border-color: var(--light2);
  }
  
  .theme-light ::selection {
    background: rgba(var(--neutral-red-x), 0.6);
    color: var(--dark-text);
  }
  
  /* Dark Mode - Tokyo Night Theme */
  .theme-dark {
    color-scheme: dark;
    
    /* ============================================
       TOKYO NIGHT COLOR PALETTE
       ============================================ */
    
    /* Accent color - Cyan */
    --accent-h: 202;
    --accent-s: 100%;
    --accent-l: 75%;
  
    /* Background colors with RGB variants for transparency */
    --bg_dark2_x: 18, 18, 24;
    --bg_dark2: rgb(var(--bg_dark2_x));
    --bg_dark_x: 22, 22, 30;
    --bg_dark: rgb(var(--bg_dark_x));
    --bg_x: 26, 27, 38;
    --bg: rgb(var(--bg_x));
    --bg_highlight_x: 41, 46, 66;
    --bg_highlight: rgb(var(--bg_highlight_x));
    --bg_highlight_dark_x: 36, 40, 59;
    --bg_highlight_dark: rgb(var(--bg_highlight_dark_x));
    --terminal_black_x: 65, 72, 104;
    --terminal_black: rgb(var(--terminal_black_x));
    
    /* Foreground colors */
    --fg_x: 192, 202, 245;
    --fg: rgb(var(--fg_x));
    --fg_dark_x: 169, 177, 214;
    --fg_dark: rgb(var(--fg_dark_x));
    --comment_x: 86, 95, 137;
    --comment: rgb(var(--comment_x));
    
    /* Blue variants */
    --blue0_x: 61, 89, 161;
    --blue0: rgb(var(--blue0_x));
    --blue_x: 122, 162, 247;
    --blue: rgb(var(--blue_x));
    
    /* Color palette */
    --cyan_hsl: 202 100% 75%;
    --cyan_x: 125, 207, 255;
    --cyan: rgb(var(--cyan_x));
    --magenta_hsl: 261 85% 79%;
    --magenta_x: 187, 154, 247;
    --magenta: rgb(var(--magenta_x));
    --pink_hsl: 331 100% 43%;
    --pink_x: 217, 0, 105;
    --pink: rgb(var(--pink_x));
    --orange_x: 255, 158, 100;
    --orange: rgb(var(--orange_x));
    --yellow_x: 224, 175, 104;
    --yellow: rgb(var(--yellow_x));
    --green_x: 158, 206, 106;
    --green: rgb(var(--green_x));
    --teal_x: 26, 188, 156;
    --teal: rgb(var(--teal_x));
    --red_x: 255, 117, 127;
    --red: rgb(var(--red_x));
    --red1_x: 219, 75, 75;
    --red1: rgb(var(--red1_x));
    
    --unknown: #ffffff;
    --link-external-filter: invert(35%) sepia(28%) saturate(681%) hue-rotate(192deg) brightness(94%) contrast(85%);
  
    /* ============================================
       OBSIDIAN VARIABLE MAPPINGS
       ============================================ */
    
    /* Base color scale (darkest to lightest) */
    --color-base-00: var(--bg_dark2);
    --color-base-05: var(--bg_dark);
    --color-base-10: var(--bg);
    --color-base-20: var(--bg_highlight_dark);
    --color-base-25: var(--bg_highlight);
    --color-base-30: var(--terminal_black);
    --color-base-35: rgb(75, 82, 114);
    --color-base-40: var(--comment);
    --color-base-50: rgb(110, 120, 160);
    --color-base-60: var(--fg_dark);
    --color-base-70: var(--fg);
    --color-base-100: rgb(220, 225, 255);
    
    /* Background colors */
    --background-primary: var(--bg);
    --background-primary-alt: var(--bg_dark);
    --background-secondary: var(--bg_dark2);
    --background-secondary-alt: var(--bg_dark);
    --background-modifier-border: var(--bg_highlight);
    --background-modifier-border-hover: var(--terminal_black);
    --background-modifier-border-focus: var(--blue);
    --background-modifier-form-field: var(--bg_dark);
    --background-modifier-form-field-highlighted: var(--bg_highlight_dark);
    --background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
    --background-modifier-success: var(--green);
    --background-modifier-error: var(--red);
    --background-modifier-error-hover: var(--red1);
    --background-modifier-cover: rgba(var(--bg_x), 0.8);
    
    /* Text colors */
    --text-normal: var(--fg);
    --text-muted: var(--fg_dark);
    --text-faint: var(--comment);
    --text-on-accent: var(--bg);
    --text-error: var(--red);
    --text-success: var(--green);
    --text-selection: rgba(var(--blue_x), 0.3);
    
    /* Accent colors */
    --text-accent: var(--cyan);
    --text-accent-hover: rgb(145, 217, 255);
    --interactive-accent: var(--cyan);
    --interactive-accent-hover: rgb(145, 217, 255);
    --interactive-accent-rgb: var(--cyan_x);
    
    /* Heading colors */
    --h1-color: var(--blue);
    --h2-color: var(--magenta);
    --h3-color: var(--cyan);
    --h4-color: var(--green);
    --h5-color: var(--yellow);
    --h6-color: var(--orange);
    --h1-weight: 600;
    --h2-weight: 600;
    --h3-weight: 600;
    --h4-weight: 500;
    --h5-weight: 500;
    --h6-weight: 500;
    
    /* Link colors */
    --link-color: var(--cyan);
    --link-color-hover: rgb(145, 217, 255);
    --link-external-color: var(--blue);
    --link-unresolved-color: var(--comment);
    --link-unresolved-opacity: 0.7;
    
    /* Code colors */
    --code-normal: var(--cyan);
    --code-background: var(--bg_dark);
    --code-comment: var(--comment);
    --code-function: var(--blue);
    --code-keyword: var(--magenta);
    --code-string: var(--green);
    --code-tag: var(--red);
    --code-value: var(--orange);
    --code-property: var(--cyan);
    
    /* Interactive elements */
    --interactive-normal: var(--bg_highlight);
    --interactive-hover: var(--bg_highlight);
    --interactive-accent: var(--cyan);
    --interactive-success: var(--green);
    
    /* Scrollbar */
    --scrollbar-bg: var(--bg);
    --scrollbar-thumb-bg: var(--bg_highlight);
    --scrollbar-active-thumb-bg: var(--terminal_black);
    
    /* Blockquotes */
    --blockquote-border: var(--cyan);
    --blockquote-background: rgba(var(--cyan_x), 0.1);
    
    /* Tables */
    --table-header-background: var(--bg_dark);
    --table-header-background-hover: var(--bg_highlight_dark);
    --table-row-even-background: rgba(var(--bg_highlight_x), 0.3);
    --table-row-odd-background: transparent;
    --table-row-hover-background: rgba(var(--bg_highlight_x), 0.5);
    --table-border-color: var(--bg_highlight);
    
    /* Tags */
    --tag-color: var(--magenta);
    --tag-background: rgba(var(--magenta_x), 0.15);
    --tag-background-hover: rgba(var(--magenta_x), 0.25);
    
    /* Checkboxes */
    --checkbox-color: var(--cyan);
    --checkbox-color-hover: rgb(145, 217, 255);
    --checkbox-border-color: var(--comment);
    --checkbox-marker-color: var(--bg);
    
    /* Syntax highlighting for code blocks */
    --color-red: var(--red);
    --color-orange: var(--orange);
    --color-yellow: var(--yellow);
    --color-green: var(--green);
    --color-cyan: var(--cyan);
    --color-blue: var(--blue);
    --color-purple: var(--magenta);
    --color-pink: var(--pink);
    
    /* Callouts */
    --callout-bug: var(--red);
    --callout-error: var(--red);
    --callout-default: var(--blue);
    --callout-example: var(--magenta);
    --callout-important: var(--cyan);
    --callout-info: var(--blue);
    --callout-question: var(--yellow);
    --callout-success: var(--green);
    --callout-tip: var(--teal);
    --callout-todo: var(--blue);
    --callout-warning: var(--orange);
    --callout-quote: var(--comment);
  }
  
  /* ============================================
     ADDITIONAL STYLING
     ============================================ */
  
  /* Enhance code blocks */
  .theme-dark pre[class*="language-"] {
    background: var(--bg_dark);
    border: 1px solid var(--bg_highlight);
    border-radius: var(--radius-m);
  }
  
  /* Enhance inline code */
  .theme-dark code {
    background: var(--bg_dark);
    color: var(--cyan);
    padding: 2px 6px;
    border-radius: var(--radius-s);
  }
  
  /* Enhance blockquotes */
  .theme-dark blockquote {
    border-left: 4px solid var(--cyan);
    background: rgba(var(--cyan_x), 0.1);
    padding: var(--size-4-2) var(--size-4-3);
    border-radius: var(--radius-s);
  }
  
  /* Enhance links */
  .theme-dark a {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
  }
  
  .theme-dark a:hover {
    color: rgb(145, 217, 255);
    border-bottom-color: var(--cyan);
  }
  
  /* External links */
  .theme-dark a.external-link {
    color: var(--blue);
  }
  
  /* Enhance horizontal rules */
  .theme-dark hr {
    border-color: var(--bg_highlight);
  }
  
  /* Selection styling */
  .theme-dark ::selection {
    background: rgba(var(--blue_x), 0.3);
    color: var(--fg);
  }
  
  /* Enhance tables */
  .theme-dark table {
    border-collapse: collapse;
    width: 100%;
  }
  
  .theme-dark table thead {
    background: var(--bg_dark);
  }
  
  .theme-dark table th,
  .theme-dark table td {
    border: 1px solid var(--bg_highlight);
    padding: var(--size-4-2) var(--size-4-3);
  }
  
  .theme-dark table tr:nth-child(even) {
    background: rgba(var(--bg_highlight_x), 0.3);
  }
  
  .theme-dark table tr:hover {
    background: rgba(var(--bg_highlight_x), 0.5);
  }
  
  /* ============================================
     UNIVERSAL STYLING (BOTH THEMES)
     ============================================ */
  
  /* Table styling - applies to both themes */
  table {
    border: 1px solid var(--background-secondary) !important;
    border-collapse: collapse;
  }
  
  thead {
    border-bottom: 2px solid var(--background-modifier-border) !important;
  }
  
  th {
    font-weight: 600 !important;
    border: 1px solid var(--background-secondary) !important;
  }
  
  td {
    border-left: 1px solid var(--background-secondary) !important;
    border-right: 1px solid var(--background-secondary) !important;
    border-bottom: 1px solid var(--background-secondary) !important;
  }
  
  .markdown-rendered tbody tr:nth-child(even) {
    background-color: var(--table-row-even-background) !important;
  }
  
  .markdown-rendered tbody tr:nth-child(odd) {
    background-color: var(--table-row-odd-background) !important;
  }
  
  .markdown-rendered tbody tr:nth-child(even):hover,
  .markdown-rendered tbody tr:nth-child(odd):hover {
    background-color: var(--table-row-background-hover) !important;
  }
  
  /* Highlight/mark styling */
  .markdown-rendered mark {
    background-color: var(--text-highlight-bg) !important;
    color: var(--text-highlight-fg) !important;
  }
  
  .markdown-rendered mark a {
    color: var(--color-red) !important;
    font-weight: 600;
  }
  
  /* Checkbox styling */
  input[type="checkbox"] {
    border: 1px solid var(--checkbox-color);
  }
  
  input[type="checkbox"]:checked {
    background-color: var(--checkbox-color);
    box-shadow: inset 0 0 0 2px var(--background-primary);
  }
  
  input[type="checkbox"]:checked:after {
    display: none;
  }
  
  /* Code block styling */
  code[class*="language-"],
  pre[class*="language-"] {
    line-height: var(--line-height-tight) !important;
  }
  
  /* Inline code styling */
  .cm-inline-code {
    border-radius: var(--radius-s);
    font-size: var(--code-size);
    padding: 0.1em 0.25em;
  }
  
  /* Keep highlight/marks the same between viewer and editor */
  .cm-highlight {
    color: var(--text-highlight-fg) !important;
  }
  
  /* List formatting */
  .cm-formatting-list {
    padding-right: 4px !important;
  }
  
  /* Hashtag hover effects */
  .cm-hashtag-begin:hover,
  .cm-hashtag-end:hover {
    color: var(--text-accent);
    text-decoration: underline;
  }
  
  /* Active line highlight */
  .cm-active {
    background-color: var(--cursor-line-background) !important;
  }
  
  /* Navigation file tags */
  .nav-file-tag {
    color: var(--nav-file-tag) !important;
  }
  
  /* Flashing effect */
  .is-flashing {
    background-color: var(--flashing-background) !important;
  }
  
  /* Embed titles */
  .markdown-embed-title {
    color: var(--color-yellow);
    font-weight: 600 !important;
  }
  
  /* Bold and italic in editor */
  .cm-line .cm-strong {
    color: var(--bold-color) !important;
  }
  
  .cm-line .cm-em {
    color: var(--italic-color) !important;
  }