/* ============================================
   LIGHT SEVENTIES — Obsidian Publish Theme
   Warm earth tones, retro 70s palette,
   programming-friendly typography.
   
   Vibe: warm cream paper, terracotta + avocado +
   harvest gold accents, clean code-focused fonts
   ============================================ */

/* --- Fonts: programming-friendly, highly readable --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================
   GLOBAL (shared between light & dark)
   ============================================ */
.published-container {

  /* --- Layout - narrower for reading comfort (~70 chars/line) --- */
  --page-width: 740px;
  --page-padding: 56px;
  --page-side-padding: 56px;

  /* --- Page Title --- */
  --page-title-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --page-title-size: 1.4rem;
  --page-title-weight: 600;
  --page-title-line-height: 1.4;
  --page-title-style: normal;
  --page-title-variant: normal;

  /* --- Fonts --- */
  --font-text-theme: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-interface-theme: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-monospace-theme: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'IBM Plex Mono', 'Source Code Pro', monospace;
  --font-text-size: 18px;
  --font-text-line-height: 1.75;

  /* --- Site Header - bigger logo --- */
  --logo-width: 270px;
  --logo-height: 270px;
  --logo-max-width: 450px;
  --logo-max-height: 450px;
  --logo-radius: 4px;
  --header-height: 300px;
  --site-name-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --site-name-size: 1rem;
  --site-name-weight: 700;

  /* --- Sidebars --- */
  --sidebar-left-width: 280px;
  --sidebar-right-width: 240px;

  /* --- Navigation --- */
  --nav-parent-item-weight: 700;

  /* --- Borders & Radius - slightly rounded for softness --- */
  --border-width: 1px;
  --radius-s: 3px;
  --radius-m: 5px;
  --radius-l: 8px;
  --radius-xl: 12px;

  /* --- Tables --- */
  --table-border-width: 1px;
  --table-header-weight: 700;

  /* --- Blockquotes --- */
  --blockquote-border-thickness: 4px;
  --blockquote-font-style: italic;

  /* --- Callouts --- */
  --callout-border-width: 1px;
  --callout-radius: 5px;
  --callout-title-weight: 700;

  /* --- Horizontal Rule --- */
  --hr-thickness: 2px;

  /* --- Checkbox --- */
  --checkbox-radius: 3px;
  --checkbox-border-width: 2px;
}


/* ============================================
   LIGHT MODE — warm cream paper / earth tones
   Palette: terracotta, avocado, harvest gold
   ============================================ */
.theme-light {

  /* --- Base colors - warm cream neutrals --- */
  --color-base-00: #FDF6E3;
  --color-base-05: #F9F0DA;
  --color-base-10: #F5EDD6;
  --color-base-20: #EDE5CD;
  --color-base-25: #E0D6BC;
  --color-base-30: #D4C8AC;
  --color-base-35: #C0B49A;
  --color-base-40: #A0907A;
  --color-base-50: #8B7D6B;
  --color-base-60: #6B5F4F;
  --color-base-70: #4A4238;
  --color-base-100: #2D2823;

  /* --- Semantic colors --- */
  --background-primary: #FDF6E3;
  --background-primary-alt: #F9F0DA;
  --background-secondary: #F5EDD6;
  --background-secondary-alt: #EDE5CD;
  --background-modifier-hover: rgba(212, 118, 42, 0.08);
  --background-modifier-active-hover: rgba(212, 118, 42, 0.12);
  --background-modifier-border: #D4C8AC;
  --background-modifier-border-hover: #B85D3E;
  --background-modifier-border-focus: #D4762A;
  --background-modifier-form-field: #FDF6E3;

  /* --- Accent (Terracotta Orange) --- */
  --accent-h: 25;
  --accent-s: 70%;
  --accent-l: 50%;

  /* --- Text --- */
  --text-normal: #2D2823;
  --text-muted: #6B5F4F;
  --text-faint: #A0907A;
  --text-accent: #D4762A;
  --text-accent-hover: #B85D3E;
  --text-on-accent: #FDF6E3;
  --text-on-accent-inverted: #D4762A;
  --text-selection: rgba(212, 118, 42, 0.15);
  --text-highlight-bg: rgba(212, 118, 42, 0.12);

  /* --- Headings --- */
  --h1-color: #2D2823;
  --h2-color: #2D2823;
  --h3-color: #2D2823;
  --h4-color: #6B5F4F;
  --h5-color: #6B5F4F;
  --h6-color: #8B7D6B;

  --h1-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --h2-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --h3-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --h4-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --h5-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --h6-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --h1-weight: 800;
  --h2-weight: 700;
  --h3-weight: 700;
  --h4-weight: 600;
  --h5-weight: 600;
  --h6-weight: 600;

  --h1-size: 2.2em;
  --h2-size: 1.6em;
  --h3-size: 1.3em;
  --h4-size: 1.1em;
  --h5-size: 1em;
  --h6-size: 0.9em;

  --h1-line-height: 1.25;
  --h2-line-height: 1.3;
  --h3-line-height: 1.35;

  --bold-color: #2D2823;
  --bold-weight: 700;
  --italic-color: #B85D3E;

  /* --- Links (terracotta / warm orange) --- */
  --link-color: #D4762A;
  --link-color-hover: #B85D3E;
  --link-decoration: underline;
  --link-decoration-hover: underline;
  --link-decoration-thickness: 2px;
  --link-weight: 500;

  --link-external-color: #7A9E3A;
  --link-external-color-hover: #5C7A2A;
  --link-external-decoration: none;
  --link-external-decoration-hover: underline;

  --link-unresolved-color: #A0907A;
  --link-unresolved-opacity: 0.7;
  --link-unresolved-decoration-style: dotted;

  /* --- Site-specific light overrides --- */
  --site-name-color: #2D2823;
  --site-name-color-hover: #D4762A;
  --site-menu-icon-color: #2D2823;
  --site-menu-icon-color-hover: #D4762A;

  --sidebar-left-background: #F9F0DA;
  --sidebar-left-border-color: #D4762A;
  --sidebar-left-border-width: 3px;
  --sidebar-right-background: #F9F0DA;
  --sidebar-right-border-color: #D4762A;
  --sidebar-right-border-width: 3px;

  --page-title-color: #2D2823;

  --nav-parent-item-color: #2D2823;
  --nav-parent-item-color-active: #D4762A;
  --nav-item-color: #6B5F4F;
  --nav-item-color-hover: #D4762A;
  --nav-item-color-active: #D4762A;
  --nav-item-border-color: transparent;
  --nav-item-border-color-hover: transparent;
  --nav-item-border-color-active: #D4762A;
  --nav-collapse-icon-color: #2D2823;
  --nav-collapse-icon-color-hover: #D4762A;

  /* --- Table light --- */
  --table-background: #FDF6E3;
  --table-border-color: #4A4238;
  --table-header-background: #4A4238;
  --table-header-color: #FDF6E3;
  --table-text-color: #2D2823;
  --table-row-alt-background: #F5EDD6;
  --table-row-background-hover: rgba(212, 118, 42, 0.05);

  /* --- Code light - programming-friendly syntax colors --- */
  --code-background: #F0E8D4;
  --code-normal: #2D2823;
  --code-comment: #A0907A;
  --code-keyword: #B85D3E;
  --code-function: #3D7A99;
  --code-string: #7A9E3A;
  --code-property: #8B5CF6;
  --code-operator: #C49A2B;
  --code-tag: #B85D3E;
  --code-value: #C49A2B;
  --code-punctuation: #6B5F4F;

  /* --- Blockquote light --- */
  --blockquote-background-color: #F5EDD6;
  --blockquote-border-color: #C49A2B;
  --blockquote-color: #4A4238;

  /* --- Callout light - 70s palette --- */
  --callout-default: 25, 70%, 50%;
  --callout-info: 200, 50%, 45%;
  --callout-tip: 25, 70%, 50%;
  --callout-success: 85, 50%, 40%;
  --callout-warning: 42, 70%, 50%;
  --callout-error: 10, 70%, 45%;
  --callout-bug: 270, 50%, 50%;
  --callout-example: 300, 50%, 40%;
  --callout-quote: 35, 20%, 40%;

  /* --- Tag light --- */
  --tag-color: #D4762A;
  --tag-background: rgba(212, 118, 42, 0.10);
  --tag-border-color: transparent;
  --tag-border-width: 0;
  --tag-radius: 3px;
  --tag-size: 0.8em;
  --tag-weight: 600;
  --tag-padding-x: 8px;
  --tag-padding-y: 2px;

  /* --- Graph --- */
  --graph-text: #2D2823;
  --graph-line: #D4C8AC;
  --graph-node: #D4762A;
  --graph-node-unresolved: #A0907A;
  --graph-node-focused: #2D2823;
  --graph-node-tag: #7A9E3A;
  --graph-node-attachment: #C49A2B;
}


/* ============================================
   DARK MODE — warm dark tones / retro night
   ============================================ */
.theme-dark {

  /* --- Base colors - warm dark neutrals --- */
  --color-base-00: #1A1612;
  --color-base-05: #221E18;
  --color-base-10: #2A251F;
  --color-base-20: #332D26;
  --color-base-25: #3D362E;
  --color-base-30: #4A4238;
  --color-base-35: #584F43;
  --color-base-40: #6B5F4F;
  --color-base-50: #8B7D6B;
  --color-base-60: #A0907A;
  --color-base-70: #C0B49A;
  --color-base-100: #EDE5CD;

  /* --- Semantic colors --- */
  --background-primary: #1A1612;
  --background-primary-alt: #2A251F;
  --background-secondary: #221E18;
  --background-secondary-alt: #332D26;
  --background-modifier-hover: rgba(212, 118, 42, 0.15);
  --background-modifier-active-hover: rgba(212, 118, 42, 0.20);
  --background-modifier-border: #4A4238;
  --background-modifier-border-hover: #D4762A;
  --background-modifier-border-focus: #D4762A;
  --background-modifier-form-field: #2A251F;

  /* --- Accent (same terracotta) --- */
  --accent-h: 25;
  --accent-s: 70%;
  --accent-l: 50%;

  /* --- Text --- */
  --text-normal: #EDE5CD;
  --text-muted: #A0907A;
  --text-faint: #6B5F4F;
  --text-accent: #E8965A;
  --text-accent-hover: #F0A870;
  --text-on-accent: #1A1612;
  --text-on-accent-inverted: #E8965A;
  --text-selection: rgba(212, 118, 42, 0.25);
  --text-highlight-bg: rgba(212, 118, 42, 0.20);

  /* --- Headings --- */
  --h1-color: #EDE5CD;
  --h2-color: #EDE5CD;
  --h3-color: #EDE5CD;
  --h4-color: #C0B49A;
  --h5-color: #C0B49A;
  --h6-color: #A0907A;

  --h1-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --h2-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --h3-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --h4-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --h5-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --h6-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --h1-weight: 800;
  --h2-weight: 700;
  --h3-weight: 700;
  --h4-weight: 600;
  --h5-weight: 600;
  --h6-weight: 600;

  --h1-size: 2.2em;
  --h2-size: 1.6em;
  --h3-size: 1.3em;
  --h4-size: 1.1em;
  --h5-size: 1em;
  --h6-size: 0.9em;

  --h1-line-height: 1.25;
  --h2-line-height: 1.3;
  --h3-line-height: 1.35;

  --bold-color: #EDE5CD;
  --bold-weight: 700;
  --italic-color: #E8965A;

  /* --- Links --- */
  --link-color: #E8965A;
  --link-color-hover: #F0A870;
  --link-decoration: underline;
  --link-decoration-hover: underline;
  --link-decoration-thickness: 2px;
  --link-weight: 500;

  --link-external-color: #8BB86A;
  --link-external-color-hover: #A0CC80;
  --link-external-decoration: none;
  --link-external-decoration-hover: underline;

  --link-unresolved-color: #6B5F4F;
  --link-unresolved-opacity: 0.6;
  --link-unresolved-decoration-style: dotted;

  /* --- Site-specific dark overrides --- */
  --site-name-color: #EDE5CD;
  --site-name-color-hover: #E8965A;
  --site-menu-icon-color: #EDE5CD;
  --site-menu-icon-color-hover: #E8965A;

  --sidebar-left-background: #221E18;
  --sidebar-left-border-color: #E8965A;
  --sidebar-left-border-width: 3px;
  --sidebar-right-background: #221E18;
  --sidebar-right-border-color: #E8965A;
  --sidebar-right-border-width: 3px;

  --page-title-color: #EDE5CD;

  --nav-parent-item-color: #EDE5CD;
  --nav-parent-item-color-active: #E8965A;
  --nav-item-color: #A0907A;
  --nav-item-color-hover: #E8965A;
  --nav-item-color-active: #E8965A;
  --nav-item-border-color: transparent;
  --nav-item-border-color-hover: transparent;
  --nav-item-border-color-active: #E8965A;
  --nav-collapse-icon-color: #EDE5CD;
  --nav-collapse-icon-color-hover: #E8965A;

  /* --- Table dark --- */
  --table-background: #1A1612;
  --table-border-color: #6B5F4F;
  --table-header-background: #2A251F;
  --table-header-color: #E8965A;
  --table-text-color: #EDE5CD;
  --table-row-alt-background: #2A251F;
  --table-row-background-hover: rgba(212, 118, 42, 0.10);

  /* --- Code dark --- */
  --code-background: #2A251F;
  --code-normal: #EDE5CD;
  --code-comment: #6B5F4F;
  --code-keyword: #E8965A;
  --code-function: #6BB8D9;
  --code-string: #8BB86A;
  --code-property: #B88BE0;
  --code-operator: #D4A02B;
  --code-tag: #E8965A;
  --code-value: #D4A02B;
  --code-punctuation: #A0907A;

  /* --- Blockquote dark --- */
  --blockquote-background-color: #2A251F;
  --blockquote-border-color: #D4A02B;
  --blockquote-color: #C0B49A;

  /* --- Callout dark --- */
  --callout-default: 25, 60%, 55%;
  --callout-info: 200, 50%, 50%;
  --callout-tip: 25, 60%, 55%;
  --callout-success: 85, 45%, 45%;
  --callout-warning: 42, 60%, 55%;
  --callout-error: 10, 60%, 50%;
  --callout-bug: 270, 50%, 55%;
  --callout-example: 300, 50%, 50%;
  --callout-quote: 35, 15%, 50%;

  /* --- Tag dark --- */
  --tag-color: #E8965A;
  --tag-background: rgba(212, 118, 42, 0.15);
  --tag-border-color: transparent;
  --tag-border-width: 0;
  --tag-radius: 3px;
  --tag-size: 0.8em;
  --tag-weight: 600;
  --tag-padding-x: 8px;
  --tag-padding-y: 2px;

  /* --- Graph --- */
  --graph-text: #EDE5CD;
  --graph-line: #4A4238;
  --graph-node: #E8965A;
  --graph-node-unresolved: #6B5F4F;
  --graph-node-focused: #EDE5CD;
  --graph-node-tag: #8BB86A;
  --graph-node-attachment: #D4A02B;
}


/* ============================================
   CUSTOM AESTHETIC ENHANCEMENTS
   Warm 70s retro touches
   ============================================ */

/* --- Content area: max-width for reading comfort --- */
.published-container .page {
  max-width: 740px;
  margin: 0 auto;
}

/* --- Paragraph spacing for long-form reading --- */
.markdown-preview-view p {
  margin-bottom: 1.2em;
}

/* --- Lists: consistent spacing --- */
.markdown-preview-view li {
  margin-bottom: 0.4em;
}

/* --- Images: prevent overflow, capped max-height --- */
.markdown-preview-view img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 4px;
  margin: 1.5em auto;
  display: block;
}

/* --- Terracotta right border accent on note pages --- */

/* --- Blockquote gets warm gold left border --- */
blockquote {
  position: relative;
  border-left: 4px solid var(--blockquote-border-color);
}

/* --- Horizontal rule — warm divider --- */
.markdown-preview-view hr {
  border-top: 2px solid var(--background-modifier-border);
  margin: 2em 0;
}

/* --- Table header: retro banner style --- */
.markdown-preview-view table th {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Tables get terracotta top border --- */
.markdown-preview-view table {
  border-top: 3px solid var(--link-color);
}

/* --- Inline code gets accent underline --- */
.markdown-preview-view code {
  border-bottom: 2px solid var(--link-color);
  padding-bottom: 1px;
  font-family: var(--font-monospace-theme);
  font-size: 0.9em;
}

/* --- Code blocks using JetBrains Mono --- */
.markdown-preview-view pre code {
  font-family: var(--font-monospace-theme) !important;
  font-size: 0.85em;
  line-height: 1.55;
}

/* --- Tag styling: uppercase, warm accent --- */
.markdown-preview-view a.tag {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-interface-theme);
}

/* --- Checkbox styling --- */
input[type="checkbox"]:checked {
  accent-color: var(--link-color);
}

/* --- Page title gets terracotta underline --- */
.markdown-preview-view .inline-title {
  border-bottom: 3px solid var(--link-color);
  padding-bottom: 8px;
  display: inline-block;
}

/* --- Site header / logo area: bottom border in accent --- */
.site-header {
  border-bottom: 3px solid var(--link-color);
  padding: 12px 0;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
}

/* --- Bigger logo styling --- */
.site-header .site-logo img {
  width: var(--logo-width);
  height: var(--logo-height);
  max-width: var(--logo-max-width);
  max-height: var(--logo-max-height);
  object-fit: contain;
  margin-right: 16px;
}

/* --- Scrollbar styling --- */
::-webkit-scrollbar-thumb {
  background: var(--link-color) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-track {
  background: var(--background-secondary) !important;
}

/* --- Image styling: soft warm border --- */
.markdown-preview-view img {
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  max-width: 100%;
}

/* --- Button / interactive styling --- */
button,
.markdown-source-view button {
  border-radius: 4px !important;
  font-weight: 600;
  font-family: var(--font-interface-theme);
}

/* --- Graph: flat colored nodes --- */
.graph-view.color-fill {
  opacity: 1 !important;
}

/* --- Navigation tree: bold active indicator --- */
.nav-tree-item.is-active > .nav-tree-item-title {
  border-left: 3px solid var(--nav-item-border-color-active);
  padding-left: 4px;
}

/* --- Mobile hamburger: ensure visibility --- */
.site-body-left-column-site-navigation .site-navigation-right-mobile-menu {
  color: var(--site-menu-icon-color);
}

/* --- Sidebar page title area --- */
.nav-tree-item-title {
  font-family: var(--font-interface-theme);
  font-size: 0.95em;
}

/* --- Frontmatter / Properties styling --- */
.metadata-container {
  border: 1px solid var(--background-modifier-border);
  border-radius: 5px;
  padding: 12px;
  margin-bottom: 24px;
  background: var(--background-primary-alt);
}

.metadata-container .metadata-property-key {
  font-weight: 600;
  font-family: var(--font-interface-theme);
}

/* --- Header site title beside logo --- */
.site-header .site-name {
  font-family: var(--site-name-font);
  font-size: var(--site-name-size);
  font-weight: var(--site-name-weight);
  color: var(--site-name-color);
  line-height: 1.3;
}

/* ============================================
   CREATIVE COMMONS LICENSE FOOTER
   CC BY-NC-ND 4.0 — appended after every page
   ============================================ */
/* --- Reduce bottom padding on main page (override Obsidian default 96px) --- */
.markdown-preview-view {
  padding-bottom: 48px;
}

.markdown-preview-view::after {
  display: block;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--background-modifier-border, #D4C8AC);
  font-family: var(--font-interface-theme);
  font-size: 0.78rem;
  color: var(--text-faint, #A0907A);
  text-align: center;
  line-height: 1.6;
  content: "© John Darrington · This work is licensed under CC BY-NC-ND 4.0 --- Generative AI was not used for any content on this site.";
}