/*
Round Table — Obsidian Theme
Author: Nick Schumacher / The Round Table
Palette:
  Dark mode: Navy & Gold
  Light mode: Platinum & Charcoal

Install:
  Put this file at:
  <Your Vault>/.obsidian/themes/Round Table/theme.css

Then open Obsidian:
  Settings → Appearance → Themes → Round Table

Note:
  This personal theme imports Montserrat from Google Fonts.
  For a public/community theme submission, Obsidian recommends keeping font assets local.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/* -----------------------------
   Shared Round Table variables
------------------------------ */
.published-container {
  /* Brand colors */
  --rt-navy: #0D1B2A;
  --rt-navy-2: #142942;
  --rt-navy-3: #1B3555;
  --rt-gold: #D4AF37;
  --rt-gold-soft: #E7C967;
  --rt-gold-muted: #A8872F;

  --rt-platinum: #F2F2F2;
  --rt-platinum-2: #FAFAF8;
  --rt-platinum-3: #E6E6E2;
  --rt-charcoal: #2B2B2B;
  --rt-charcoal-2: #3A3A3A;
  --rt-charcoal-3: #5A5A5A;
  --link-color: var(--text-accent);
  --link-color-hover: var(--text-accent-hover);

  --h1-size: 2.1em;
  --h2-size: 1.65em;
  --h3-size: 1.35em;
  --h4-size: 1.15em;
  --h5-size: 1em;
  --h6-size: .92em;

  --h1-weight: 300;
  --h2-weight: 250;
  --h3-weight: 225;
  --h4-weight: 400;
  --bold-weight: 700;

  /* Layout polish */
  --page-width: 760px;
  --page-side-padding: 32px;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 18px;
  --rt-border-width: 1px;

  --font-interface-theme: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text-theme: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-monospace-theme: "SFMono-Regular", Consolas, "Roboto Mono", "Source Code Pro", monospace;

  --font-interface: var(--font-interface-theme);
  --font-text: var(--font-text-theme);
  --font-monospace: var(--font-monospace-theme);

  font-family: var(--font-interface-theme);

  /* Optional: hide the default Publish footer. Remove this line if you want it visible. */
  --footer-display: none;
}

/* -----------------------------
   Light theme: Platinum & Charcoal
------------------------------ */
.theme-light .published-container,
.published-container.theme-light {
  --background-primary: var(--rt-platinum-2);
  --background-primary-alt: var(--rt-platinum);
  --background-secondary: var(--rt-platinum);
  --background-secondary-alt: var(--rt-platinum-3);

  --text-normal: var(--rt-charcoal);
  --text-muted: var(--rt-charcoal-3);
  --text-faint: #777771;
  --text-accent: var(--rt-charcoal);
  --text-accent-hover: #000000;
  --text-on-accent: #FFFFFF;

  --interactive-normal: #FFFFFF;
  --interactive-hover: var(--rt-platinum);
  --interactive-accent: var(--rt-charcoal);
  --interactive-accent-hover: #111111;

  --background-modifier-border: #D6D6D0;
  --background-modifier-border-hover: #BDBDB6;
  --background-modifier-hover: rgba(43, 43, 43, 0.06);
  --background-modifier-active-hover: rgba(43, 43, 43, 0.1);

  --blockquote-border-color: var(--rt-charcoal);
  --hr-color: #D1D1CC;
  --tag-color: var(--rt-charcoal);
  --tag-background: rgba(43, 43, 43, 0.08);
  --tag-background-hover: rgba(43, 43, 43, 0.14);
  --code-background: #EDEDE9;
  --code-normal: #1F1F1F;

  --rt-heading-1: #1f1f1f; /* deep charcoal */
  --rt-heading-2: #2b2b2b; /* charcoal */
  --rt-heading-3: #70542a; /* antique brass */
  --rt-heading-4: #8a6a35; /* soft brass */
  --rt-heading-5: #525252; /* warm gray */
  --rt-heading-6: #767676; /* platinum gray */
}

/* -----------------------------
   Dark theme: Navy & Gold
------------------------------ */
.theme-dark .published-container,
.published-container.theme-dark {
  --background-primary: var(--rt-navy);
  --background-primary-alt: #0A1623;
  --background-secondary: #091521;
  --background-secondary-alt: var(--rt-navy-2);

  --text-normal: #F5F0E6;
  --text-muted: #B8B4AA;
  --text-faint: #817B6B;
  --text-accent: var(--rt-gold);
  --text-accent-hover: var(--rt-gold-soft);
  --text-on-accent: #08111C;

  --interactive-normal: var(--rt-navy-2);
  --interactive-hover: var(--rt-navy-3);
  --interactive-accent: var(--rt-gold);
  --interactive-accent-hover: var(--rt-gold-soft);

  --background-modifier-border: rgba(212, 175, 55, 0.24);
  --background-modifier-border-hover: rgba(212, 175, 55, 0.44);
  --background-modifier-hover: rgba(212, 175, 55, 0.08);
  --background-modifier-active-hover: rgba(212, 175, 55, 0.14);

  --blockquote-border-color: var(--rt-gold);
  --hr-color: rgba(212, 175, 55, 0.32);
  --tag-color: var(--rt-gold-soft);
  --tag-background: rgba(212, 175, 55, 0.12);
  --tag-background-hover: rgba(212, 175, 55, 0.2);
  --code-background: #07111D;
  --code-normal: #F3D77B;
  
  /* Dark theme — Navy & Gold heading scale */
  --rt-heading-1: #f0d982; /* bright ceremonial gold */
  --rt-heading-2: #e2c75b; /* polished gold */
  --rt-heading-3: #d4af37; /* primary Round Table gold */
  --rt-heading-4: #c9a646; /* antique gold */
  --rt-heading-5: #b9c7d8; /* platinum-blue contrast */
  --rt-heading-6: #8fa3bb; /* muted steel blue */
}

/* -----------------------------
   Publish shell
------------------------------ */
body {
  font-family: var(--font-text-theme);
  background: var(--background-primary);
  color: var(--text-normal);
}

.published-container {
  background: var(--background-primary);
  color: var(--text-normal);
}

.site-body-left-column,
.site-body-right-column,
.site-header,
.site-footer {
  background: var(--background-primary);
  color: var(--text-muted);
}

.site-header {
  border-bottom: var(--rt-border-width) solid var(--background-modifier-border);
}

.site-footer {
  border-top: var(--rt-border-width) solid var(--background-modifier-border);
  color: var(--text-faint);
}

/* -----------------------------
   Site title / navigation
------------------------------ */
.site-header-text,
.site-header-text a,
.site-name,
.site-name a {
  color: var(--text-normal);
  font-family: var(--font-interface-theme);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-view,
.tree-item,
.tree-item-self,
.tree-item-inner,
.outline-view,
.backlinks,
.search-view-container {
  color: var(--text-muted);
}

.tree-item-self:hover,
.tree-item-self.is-clickable:hover,
.nav-file-title:hover,
.nav-folder-title:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.tree-item-self.is-active,
.nav-file-title.is-active {
  background: var(--background-modifier-active-hover);
  color: var(--text-accent);
  border-radius: var(--radius-s);
}

/* -----------------------------
   Links
------------------------------ */
a,
.internal-link,
.external-link {
  color: var(--text-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover,
.internal-link:hover,
.external-link:hover {
  color: var(--text-accent-hover);
}

/* -----------------------------
   Reading view content
------------------------------ */
.markdown-preview-view,
.markdown-rendered,
.markdown-preview-section {
  color: var(--text-normal);
}

.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
  color: var(--text-normal);
  font-family: var(--font-interface-theme);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.markdown-rendered h1 {
  font-size: 2.35rem;
  margin-top: 0.35em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--background-modifier-border);
  color: var(--rt-heading-1);
}

.markdown-rendered h2 {
  font-size: 1.65rem;
  margin-top: 2.1em;
  padding-bottom: 0.25em;
  border-bottom: none !important;
  color: var(--rt-heading-2);
}

.markdown-rendered h3 {
  font-size: 1.25rem;
  color: var(--rt-heading-3);
}

.markdown-rendered h4 {
  color: var(--rt-heading-4);
}

.markdown-rendered h5 {
  color: var(--rt-heading-5);
}

.markdown-rendered h6 {
  color: var(--rt-heading-6);
}

.markdown-rendered strong,
.cm-strong {
  color: var(--rt-heading-4);
}

.markdown-rendered em,
.cm-em {
  color: var(--rt-heading-4);
}

.markdown-rendered p,
.markdown-rendered li {
  line-height: 1.72;
}


/* -----------------------------
   Callouts / blockquotes
------------------------------ */
.markdown-rendered blockquote {
  border-left: 4px solid var(--blockquote-border-color);
  background: var(--background-secondary);
  color: var(--text-muted);
  margin: 1.5em 0;
  padding: 0.85em 1.1em;
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

.callout {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-secondary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.callout-title {
  color: var(--text-accent);
}

/* -----------------------------
   Code
------------------------------ */
.markdown-rendered code,
code {
  background: var(--code-background);
  color: var(--code-normal);
  border-radius: var(--radius-s);
  padding: 0.15em 0.35em;
  font-family: var(--font-monospace-theme);
}

.markdown-rendered pre {
  background: var(--code-background);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  padding: 1em;
  overflow-x: auto;
}

.markdown-rendered pre code {
  padding: 0;
  background: transparent;
}

/* -----------------------------
   Tables
------------------------------ */
.markdown-rendered table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.25em 0;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.markdown-rendered th {
  background: var(--background-secondary-alt);
  color: var(--text-normal);
  font-weight: 700;
}

.markdown-rendered th,
.markdown-rendered td {
  border: 1px solid var(--background-modifier-border);
  padding: 0.7em 0.85em;
}

.markdown-rendered tr:nth-child(even) {
  background: var(--background-secondary);
}

/* -----------------------------
   Tags, metadata, embeds
------------------------------ */
.tag,
a.tag {
  color: var(--tag-color);
  background: var(--tag-background);
  border-radius: 999px;
  padding: 0.18em 0.6em;
  text-decoration: none;
  font-size: 0.85em;
}

.tag:hover,
a.tag:hover {
  background: var(--tag-background-hover);
  color: var(--text-accent-hover);
}

.internal-embed,
.markdown-embed {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-secondary);
  padding: 0.75em 1em;
}

.markdown-embed-title {
  color: var(--text-accent);
  font-weight: 700;
}

/* -----------------------------
   Search
------------------------------ */
input[type="search"],
.search-input-container input {
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
}

input[type="search"]:focus,
.search-input-container input:focus {
  outline: 2px solid var(--text-accent);
  outline-offset: 2px;
}

.search-result-file-title,
.search-result-file-matched-text {
  color: var(--text-accent);
}

.search-result-file-match {
  color: var(--text-muted);
}

/* -----------------------------
   Buttons / interactive elements
------------------------------ */
button,
.clickable-icon,
.site-header .clickable-icon {
  color: var(--text-muted);
  border-radius: var(--radius-s);
}

button:hover,
.clickable-icon:hover,
.site-header .clickable-icon:hover {
  color: var(--text-accent);
  background: var(--background-modifier-hover);
}

/* -----------------------------
   Horizontal rule / selection
------------------------------ */
.markdown-rendered hr {
  border: none;
  border-top: 1px solid var(--hr-color);
  margin: 2.5em 0;
}

::selection {
  background: var(--text-accent);
  color: var(--text-on-accent);
}

/* -----------------------------
   Optional brand crest treatment
   Use on a note with frontmatter:
   cssclasses:
     - round-table-home
------------------------------ */
.round-table-home .markdown-rendered h1:first-child {
  text-align: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: none;
  margin-bottom: 0.15em;
}

.round-table-home .markdown-rendered h1:first-child::after {
  content: "";
  display: block;
  width: 96px;
  height: 2px;
  margin: 0.55em auto 0;
  background: var(--text-accent);
}

/* -----------------------------
   Mobile tuning
------------------------------ */
@media screen and (max-width: 768px) {
  .published-container {
    --page-side-padding: 20px;
  }

  .markdown-rendered h1 {
    font-size: 1.95rem;
  }

  .markdown-rendered h2 {
    font-size: 1.45rem;
  }
}

/* Live Preview / Source Mode headings */
.markdown-source-view.mod-cm6 .cm-header-1 {
  color: var(--rt-heading-1);
}

.markdown-source-view.mod-cm6 .cm-header-2 {
  color: var(--rt-heading-2);
}

.markdown-source-view.mod-cm6 .cm-header-3 {
  color: var(--rt-heading-3);
}

.markdown-source-view.mod-cm6 .cm-header-4 {
  color: var(--rt-heading-4);
}

.markdown-source-view.mod-cm6 .cm-header-5 {
  color: var(--rt-heading-5);
}

.markdown-source-view.mod-cm6 .cm-header-6 {
  color: var(--rt-heading-6);
}

/* Optional subtle hierarchy polish */
.markdown-rendered h1,
.markdown-source-view.mod-cm6 .cm-header-1 {
  text-shadow: 0 0 18px color-mix(in srgb, var(--rt-heading-1) 18%, transparent);
}

.markdown-rendered h2,
.markdown-source-view.mod-cm6 .cm-header-2 {
  text-shadow: 0 0 14px color-mix(in srgb, var(--rt-heading-2) 14%, transparent);
}

.markdown-rendered h3,
.markdown-source-view.mod-cm6 .cm-header-3 {
  text-shadow: 0 0 10px color-mix(in srgb, var(--rt-heading-3) 10%, transparent);
}