/* ══════════════════════════════════════════════
   Obsidian Architect v28
   Generated: 2026-03-07
   Seed: #60a5fa  |  Harmony: mono
══════════════════════════════════════════════ */

.theme-dark {
  --background-primary: #0c0f13;
  --background-secondary: #101419;
  --editor-background: #14191f;
  --sidebar-background: #0a0c10;
  --background-modifier-hover: #1a2028;
  --background-modifier-hover-2: #202832;
  --background-modifier-active-hover: #28323e;
  --text-selection: rgba(47,121,212,0.28);
  --text-highlight-bg: rgba(245,242,92,0.38);
  --text-h1: #2f79d4;
  --text-h2: #c7cbd1;
  --text-h3: #abb2ba;
  --text-h4: #959da7;
  --text-h5: #808993;
  --text-h6: #6d747e;
  --text-normal: #cdd1d5;
  --text-muted: #5c6570;
  --text-faint: #42474d;
  --text-on-accent: #000000;
  --text-error: #f58a66;
  --text-success: #61e5aa;
  --text-warning: #f5f25c;
  --link-color: #2f79d4;
  --link-color-hover: rgba(47,121,212,0.85);
  --link-external-color: rgba(47,121,212,0.82);
  --link-unresolved-color: rgba(47,121,212,0.42);
  --interactive-accent: #2f79d4;
  --interactive-accent-hover: rgba(47,121,212,0.85);
  --bold-color: #e9eaec;
  --italic-color: #b5bcc5;
  --strikethrough-color: #5c6570;
  --text-highlight-bg-active: rgba(245,242,92,0.55);
  --text-highlight-fg: #ffffff;
  --code-normal: #9fdfa3;
  --code-background: #101419;
  --code-border: #2c3744;
  --code-keyword: #86ea8b;
  --code-function: #edd678;
  --code-string: #de739a;
  --code-value: #726feb;
  --code-comment: #666f7a;
  --code-tag: #86ea8b;
  --code-property: #e3aa6d;
  --tag-color: #2f79d4;
  --tag-background: rgba(47,121,212,0.12);
  --tag-border-color: rgba(47,121,212,0.3);
  --frontmatter-color: #5c6570;
  --frontmatter-background: #0e1116;
  --blockquote-color: #8a939e;
  --blockquote-border-color: #344151;
  --table-header-background: #12161c;
  --table-row-background-hover: rgba(47,121,212,0.07);
  --table-border-color: #2c3744;
  --hr-color: #2c3744;
  --border-color: #2c3744;
  --border-color-focus: #2f79d4;
  --divider-color: #1c232c;
  --scrollbar-bg: #14191f;
  --scrollbar-thumb-bg: #2c3744;
  --callout-color-note: #2f79d4;
  --callout-color-tip: #5ed7de;
  --callout-color-warning: #f5f25c;
  --callout-color-danger: #f58a66;
  --callout-color-info: #6c88ef;
  --callout-color-success: #61e5aa;
  --checkbox-color: #2f79d4;
  --checkbox-color-hover: #2f79d4;
  --task-done-color: #5c6570;
  --graph-node: #2f79d4;
  --graph-edge: #303c4b;
  --graph-bg: #0c0f13;
  --nav-item-color: #5c6570;
  --nav-item-color-active: #2f79d4;
  --nav-item-color-hover: #c7ccd1;
  --nav-item-background-active: rgba(47,121,212,0.14);
  --status-bar-text-color: #5c6570;
  --status-bar-background: #0a0c10;
  --ribbon-background: #080a0c;
  --ribbon-icon-color: #384657;
  --ribbon-icon-color-hover: #2f79d4;
  --modal-background: #12161c;
  --modal-border-color: #2c3744;
  --prompt-background: #0e1116;
  --menu-background: #12161c;
  --menu-border-color: #2c3744;
  --indentation-guide-color: #2c3744;
  --list-marker-color: #384657;
  --list-marker-color-hover: #2f79d4;
}

.theme-light {
  --background-primary: #f6f7f8;
  --background-secondary: #ebedf0;
  --editor-background: #ffffff;
  --sidebar-background: #e5e8eb;
  --background-modifier-hover: #dce0e5;
  --background-modifier-hover-2: #d0d6dc;
  --background-modifier-active-hover: #c5cbd3;
  --text-selection: rgba(37,100,178,0.22);
  --text-highlight-bg: rgba(156,154,17,0.38);
  --text-h1: #18d76e;
  --text-h2: #16b907;
  --text-h3: #32373e;
  --text-h4: #2b3f55;
  --text-h5: #2d425f;
  --text-h6: #2f4869;
  --text-normal: #1f2328;
  --text-muted: #677483;
  --text-faint: #717171;
  --text-on-accent: #ffffff;
  --text-error: #9e3b1a;
  --text-success: #1f7a51;
  --text-warning: #9c9a11;
  --link-color: #cc2098;
  --link-color-hover: #1c4c87;
  --link-external-color: #2a72cb;
  --link-unresolved-color: rgba(37,100,178,0.45);
  --interactive-accent: #2564b2;
  --interactive-accent-hover: #1c4c87;
  --bold-color: #131416;
  --italic-color: #303740;
  --strikethrough-color: #677483;
  --text-highlight-bg-active: rgba(156,154,17,0.55);
  --text-highlight-fg: #111111;
  --code-normal: #3b9140;
  --code-background: #ebedf0;
  --code-border: #cbd0d8;
  --code-keyword: #1f8424;
  --code-function: #776418;
  --code-string: #661e39;
  --code-value: #1a1881;
  --code-comment: #8d939a;
  --code-tag: #1f8424;
  --code-property: #72491d;
  --tag-color: #2564b2;
  --tag-background: rgba(37,100,178,0.1);
  --tag-border-color: rgba(37,100,178,0.28);
  --frontmatter-color: #677483;
  --frontmatter-background: #ebedf0;
  --blockquote-color: #57606b;
  --blockquote-border-color: #c5cbd3;
  --table-header-background: #e2e5e9;
  --table-row-background-hover: rgba(37,100,178,0.06);
  --table-border-color: #cbd0d8;
  --hr-color: #cbd0d8;
  --border-color: #cbd0d8;
  --border-color-focus: #2564b2;
  --divider-color: #d0d6dc;
  --scrollbar-bg: #dce0e5;
  --scrollbar-thumb-bg: #bfc6cf;
  --callout-color-note: #2564b2;
  --callout-color-tip: #1e6d71;
  --callout-color-warning: #9c9a11;
  --callout-color-danger: #9e3b1a;
  --callout-color-info: #17308c;
  --callout-color-success: #1f7a51;
  --checkbox-color: #2564b2;
  --checkbox-color-hover: #2564b2;
  --task-done-color: #677483;
  --graph-node: #2564b2;
  --graph-edge: #c5cbd3;
  --graph-bg: #f6f7f8;
  --nav-item-color: #677483;
  --nav-item-color-active: #2564b2;
  --nav-item-color-hover: #24282e;
  --nav-item-background-active: rgba(37,100,178,0.12);
  --status-bar-text-color: #677483;
  --status-bar-background: #e5e8eb;
  --ribbon-background: #dfe3e7;
  --ribbon-icon-color: #b3bcc6;
  --ribbon-icon-color-hover: #2564b2;
  --modal-background: #ffffff;
  --modal-border-color: #cbd0d8;
  --prompt-background: #f9fafb;
  --menu-background: #ffffff;
  --menu-border-color: #cbd0d8;
  --indentation-guide-color: #cbd0d8;
  --list-marker-color: #b3bcc6;
  --list-marker-color-hover: #2564b2;
}


/* ════════════════════════════════
   Button Styles — Obsidian Architect
   Shape: sharp | Fill: solid | Size: md
   Hover: glow | Font: mono | Shadow: none
════════════════════════════════ */

/* Base button — applies to all Obsidian buttons + Publish */
.publish-button,
.mod-cta,
.mod-warning,
.clickable-icon,
button.mod-cta {
  border-radius: 2px;
  padding: 8px 20px;
  font-family: monospace;
  font-size: 0.82em;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/* ── Dark Theme ── */
.theme-dark .publish-button,
.theme-dark .mod-cta,
.theme-dark .mod-warning,
.theme-dark button.mod-cta {
  background: #2f79d4;
  color: #000;
  border: 1px solid #2f79d4;
  box-shadow: none;
}

.theme-dark .publish-button:hover,
.theme-dark .mod-cta:hover,
.theme-dark .mod-warning:hover,
.theme-dark button.mod-cta:hover {
  box-shadow: 0 0 18px rgba(47,121,212,0.7), 0 0 8px rgba(47,121,212,0.4);
  transform: translateY(-1px);
}

.theme-dark .publish-button:active,
.theme-dark .mod-cta:active,
.theme-dark button.mod-cta:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: none;
}

.theme-dark .publish-button:focus-visible,
.theme-dark .mod-cta:focus-visible {
  outline: 2px solid #2f79d4;
  outline-offset: 2px;
}

/* ── Light Theme ── */
.theme-light .publish-button,
.theme-light .mod-cta,
.theme-light .mod-warning,
.theme-light button.mod-cta {
  background: #2564b2;
  color: #fff;
  border: 1px solid #2564b2;
  box-shadow: none;
}

.theme-light .publish-button:hover,
.theme-light .mod-cta:hover,
.theme-light .mod-warning:hover,
.theme-light button.mod-cta:hover {
  box-shadow: 0 0 18px rgba(37,100,178,0.55), 0 0 8px rgba(37,100,178,0.3);
  transform: translateY(-1px);
}

.theme-light .publish-button:active,
.theme-light .mod-cta:active,
.theme-light button.mod-cta:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: none;
}

.theme-light .publish-button:focus-visible,
.theme-light .mod-cta:focus-visible {
  outline: 2px solid #2564b2;
  outline-offset: 2px;
}

/* ════════════════════════════════
   All Fill Variants (for reference)
════════════════════════════════ */

/* Fill: solid */
.publish-button.btn-solid { background: #2f79d4; color: #000; border: 1px solid #2f79d4; }
/* Fill: outline */
.publish-button.btn-outline { background: transparent; color: #2f79d4; border: 1.5px solid #2f79d4; }
/* Fill: ghost */
.publish-button.btn-ghost { background: rgba(47,121,212,0.1); color: #2f79d4; border: 1px solid rgba(47,121,212,0.25); }
/* Fill: gradient */
.publish-button.btn-gradient { background: linear-gradient(135deg, #2f79d4, #532fd4); color: #000; border: none; }

/* ════════════════════════════════
   Size Variants
════════════════════════════════ */

.publish-button.btn-sm { padding: 5px 14px; font-size: 0.75em; }
.publish-button.btn-md { padding: 8px 20px; font-size: 0.82em; }
.publish-button.btn-lg { padding: 13px 30px; font-size: 0.92em; }

/* ════════════════════════════════
   Shape Variants
════════════════════════════════ */

.publish-button.btn-sharp { border-radius: 2px; }
.publish-button.btn-soft  { border-radius: 10px; }
.publish-button.btn-pill  { border-radius: 100px; }
.publish-button.btn-none  { border-radius: 0; }

/* ════════════════════════════════
   Hover Variants (Dark)
════════════════════════════════ */

.theme-dark .publish-button.hover-glow:hover {
  box-shadow: 0 0 18px rgba(47,121,212,0.7), 0 0 8px rgba(47,121,212,0.4);
  transform: translateY(-1px);
}

.theme-dark .publish-button.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

.theme-dark .publish-button.hover-fill:hover {
  background: #2f79d4;
  color: #000;
  border-color: #2f79d4;
}

.theme-dark .publish-button.hover-slide:hover {
  background: linear-gradient(90deg, #2f79d4 0%, rgba(47,121,212,0.7) 100%);
  color: #000;
}

/* ════════════════════════════════
   Disabled State
════════════════════════════════ */

.publish-button:disabled,
.mod-cta:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}
/* ---- TAB STRIP LAYOUT ---- */
.publish-tabs-bar {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: #ffe1e4;            /* light pink background */
  overflow-x: auto;
}

/* ---- SINGLE TAB ---- */
.publish-tab {
  position: relative;
  padding: 0.65rem 1.8rem;
  border-radius: 999px;
  background: #ffffff;
  color: #222222;
  font-weight: 500;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.07);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
  white-space: nowrap;
}

/* Hover state */
.publish-tab:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* ---- ACTIVE TAB (purple pill) ---- */
.publish-tab.is-active,
.publish-tab[aria-current="page"] {
  background: #b05cff;
  color: #ffffff;
}

/* Optional badge on the right (like the “25” / “8”) */
.publish-tab .tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  min-width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #fff;
  color: #111;
}