/* ==========================================================
   Ember Violet: site-wide theme for Obsidian Publish
   Dark and light mode, every page, no per-note setting needed.
   Put this at the TOP of your vault's publish.css (the @import must be first).

   - Normal notes get the theme automatically.
   - The Projects page keeps its special layout: give that note
       cssclasses: projects-page
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap");

/* ---- 1. Palette ----
   Every color on the site comes from these variables. Change them here and
   the whole site follows. Dark mode first, light mode second. */
:root {
  --pp-bg: #0d0810;
  --pp-surface: #170f1a;
  --pp-border: #2f2035;
  --pp-dashed: #43304b;
  --pp-text: #f6eef2;
  --pp-body: #cbb8c2;
  --pp-dim: #a8929f;
  --pp-faint: #7d6876;
  --pp-accent: #fb923c;
  --pp-accent-rgb: 251, 146, 60;
  --pp-dot: #f472b6;
  --pp-on-accent: #1a0f0a;
  --pp-glow-rgb: 253, 211, 177;
  --pp-glow-a: 0.35;
  --pp-nav-bg: rgba(23, 15, 26, 0.78);
  --pp-shadow-rgb: 0, 0, 0;
  --pp-shadow-a: 0.55;
  --pp-mono: "Share Tech Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pp-sans: "Rajdhani", system-ui, sans-serif;
}

:root.theme-light,
:root:has(.theme-light) {
  --pp-bg: #fffaf7;
  --pp-surface: #fbefe8;
  --pp-border: #f0dccf;
  --pp-dashed: #e4c7b5;
  --pp-text: #2d1a14;
  --pp-body: #5e4338;
  --pp-dim: #80655a;
  --pp-faint: #a58b80;
  --pp-accent: #c2410c;
  --pp-accent-rgb: 194, 65, 12;
  --pp-dot: #be185d;
  --pp-on-accent: #ffffff;
  --pp-glow-rgb: 194, 65, 12;
  --pp-glow-a: 0.2;
  --pp-nav-bg: rgba(255, 255, 255, 0.82);
  --pp-shadow-rgb: 90, 50, 30;
  --pp-shadow-a: 0.16;
}

/* ---- 2. Point Publish's own colors at the palette ----
   Publish builds the sidebar, search box, links, code, tables and callouts
   from these variables, so this restyles all of them at once. */
.published-container {
  --background-primary: var(--pp-bg);
  --background-primary-alt: var(--pp-surface);
  --background-secondary: var(--pp-surface);
  --background-secondary-alt: var(--pp-surface);
  --background-modifier-border: var(--pp-border);
  --background-modifier-border-hover: var(--pp-dashed);
  --background-modifier-hover: rgba(var(--pp-accent-rgb), 0.1);
  --background-modifier-form-field: var(--pp-surface);

  --text-normal: var(--pp-body);
  --text-muted: var(--pp-dim);
  --text-faint: var(--pp-faint);
  --text-accent: var(--pp-accent);
  --text-accent-hover: var(--pp-accent);
  --text-on-accent: var(--pp-on-accent);
  --text-selection: rgba(var(--pp-accent-rgb), 0.3);
  --text-highlight-bg: rgba(var(--pp-accent-rgb), 0.25);

  --interactive-accent: var(--pp-accent);
  --interactive-accent-hover: var(--pp-accent);
  --interactive-normal: var(--pp-surface);
  --interactive-hover: var(--pp-border);

  --link-color: var(--pp-accent);
  --link-color-hover: var(--pp-accent);
  --link-external-color: var(--pp-accent);
  --link-external-color-hover: var(--pp-accent);
  --link-unresolved-color: var(--pp-dim);

  --bold-color: var(--pp-text);
  --italic-color: var(--pp-text);
  --h1-color: var(--pp-text);
  --h2-color: var(--pp-text);
  --h3-color: var(--pp-accent);
  --h4-color: var(--pp-dim);
  --h5-color: var(--pp-dim);
  --h6-color: var(--pp-dim);

  --blockquote-border-color: var(--pp-accent);
  --blockquote-color: var(--pp-dim);
  --blockquote-background-color: var(--pp-surface);
  --code-background: var(--pp-surface);
  --code-normal: var(--pp-text);
  --hr-color: var(--pp-border);
  --table-border-color: var(--pp-border);
  --tag-color: var(--pp-accent);
  --tag-background: rgba(var(--pp-accent-rgb), 0.1);
  --list-marker-color: var(--pp-accent);
  --checkbox-color: var(--pp-accent);

  --nav-item-color: var(--pp-body);
  --nav-item-color-hover: var(--pp-text);
  --nav-item-color-active: var(--pp-accent);
  --nav-item-background-hover: rgba(var(--pp-accent-rgb), 0.1);
  --nav-item-background-active: rgba(var(--pp-accent-rgb), 0.14);

  --callout-default: var(--pp-accent-rgb);
  --callout-info: var(--pp-accent-rgb);

  --font-text: var(--pp-sans);
  --font-interface: var(--pp-sans);
  --font-monospace: var(--pp-mono);
}

/* Solid backgrounds everywhere, including the sidebars */
body,
.published-container,
.published-container .site-body,
.published-container .site-body-left-column,
.published-container .site-body-right-column,
.published-container .site-body-center-column,
.published-container .nav-view-outer,
.published-container .render-container,
.published-container .markdown-preview-view {
  background: var(--pp-bg) !important;
}

.published-container ::selection {
  background: rgba(var(--pp-accent-rgb), 0.3);
}

/* ---- 3. Normal notes ---- */
.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) {
  font-family: var(--pp-sans);
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--pp-body);
}

.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) strong {
  color: var(--pp-text);
  font-weight: 700;
}

.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) em {
  color: var(--pp-text);
}

/* Headings */
.published-container .inline-title,
.published-container .page-header h1,
.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) h1 {
  font-family: var(--pp-mono);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--pp-text);
  text-shadow: 0 0 18px rgba(var(--pp-glow-rgb), var(--pp-glow-a));
}

.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) h2 {
  font-family: var(--pp-mono);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--pp-text);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--pp-border);
}

.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) h3 {
  font-family: var(--pp-sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pp-accent);
}

.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) h4,
.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) h5,
.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) h6 {
  font-family: var(--pp-sans);
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-dim);
}

/* Links */
.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) a,
.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) a.internal-link,
.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) a.external-link {
  color: var(--pp-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--pp-accent-rgb), 0.4);
  transition: border-color 0.15s ease;
}

.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) a:hover {
  border-bottom-color: var(--pp-accent);
}

/* Lists */
.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) li::marker {
  color: var(--pp-accent);
}

.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) input[type="checkbox"] {
  accent-color: var(--pp-accent);
}

/* Quotes */
.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) blockquote {
  padding: 0.6rem 1rem;
  background: var(--pp-surface);
  border-left: 3px solid var(--pp-accent);
  border-radius: 0 8px 8px 0;
  color: var(--pp-dim);
}

/* Code */
.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) code {
  font-family: var(--pp-mono);
  font-size: 0.85em;
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: 5px;
  padding: 0.05rem 0.35rem;
  color: var(--pp-text);
}

.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) pre {
  background: var(--pp-surface);
  border: 1px dashed var(--pp-dashed);
  border-radius: 10px;
  padding: 0.8rem 1rem;
}

.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.7;
}

/* Tables */
.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) table {
  border-collapse: collapse;
}

.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) th {
  font-family: var(--pp-mono);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pp-text);
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
}

.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) td {
  border: 1px solid var(--pp-border);
}

/* Lines, images, tags */
.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) hr {
  border: none;
  border-top: 1px solid var(--pp-border);
}

.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) img {
  border-radius: 10px;
  border: 1px solid var(--pp-border);
}

.markdown-preview-view:not(.projects-page):not(:has(.projects-page)) a.tag {
  font-family: var(--pp-mono);
  font-size: 0.8rem;
  padding: 0.1rem 0.6rem;
  color: var(--pp-accent);
  background: rgba(var(--pp-accent-rgb), 0.1);
  border: 1px solid var(--pp-dashed);
  border-radius: 999px;
}

/* ---- 4. Sidebar ---- */
.published-container .site-body-left-column-site-name {
  font-family: var(--pp-mono);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--pp-text);
  text-shadow: 0 0 14px rgba(var(--pp-glow-rgb), var(--pp-glow-a));
}

/* ---- 5. Graph view ----
   Colors come from the palette. Publish reads them only when the graph first
   draws and when the light/dark mode changes, which is why publish.js nudges
   it once after the page loads. */
:root,
body {
  --graph-node: var(--pp-accent) !important;
  --graph-node-focused: var(--pp-dot) !important;
  --graph-node-tag: var(--pp-dot) !important;
  --graph-node-attachment: var(--pp-body) !important;
  --graph-node-unresolved: var(--pp-faint) !important;
  --graph-line: var(--pp-dashed) !important;
  --graph-text: var(--pp-body) !important;
}

/* Older Publish builds color the graph through classes instead */
.graph-view.color-fill { color: var(--graph-node); }
.graph-view.color-fill-focused { color: var(--graph-node-focused); }
.graph-view.color-fill-highlight,
.graph-view.color-circle { color: var(--graph-node); }
.graph-view.color-fill-tag { color: var(--graph-node-tag); }
.graph-view.color-fill-attachment { color: var(--graph-node-attachment); }
.graph-view.color-fill-unresolved { color: var(--graph-node-unresolved); }
.graph-view.color-line { color: var(--graph-line); }
.graph-view.color-line-highlight,
.graph-view.color-arrow { color: var(--graph-node); }
.graph-view.color-text { color: var(--graph-text); }

/* The graph card, with a slow pulsing glow.
   The graph is drawn on a canvas, so individual dots can't be animated; the
   whole graph glows, the card border breathes, and a soft light swells behind
   the center. */
.published-container .graph-view-placeholder,
.published-container .graph-view-container {
  background: var(--pp-surface) !important;
  border-color: var(--pp-border) !important;
  border-radius: 14px;
}

.published-container .graph-view-placeholder {
  position: relative;
  overflow: hidden;
  animation: pp-graph-card 4.5s ease-in-out infinite;
}

.published-container .graph-view-placeholder::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--pp-accent-rgb), 0.3), transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: pp-graph-breathe 4.5s ease-in-out infinite;
}

.published-container .graph-view-placeholder canvas {
  animation: pp-graph-glow 4.5s ease-in-out infinite;
}

@keyframes pp-graph-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(var(--pp-accent-rgb), 0.3)); }
  50%      { filter: drop-shadow(0 0 10px rgba(var(--pp-accent-rgb), 0.95)); }
}

@keyframes pp-graph-card {
  0%, 100% { box-shadow: 0 0 0 rgba(var(--pp-accent-rgb), 0), inset 0 0 16px rgba(var(--pp-accent-rgb), 0.03); }
  50%      { box-shadow: 0 0 22px rgba(var(--pp-accent-rgb), 0.2), inset 0 0 28px rgba(var(--pp-accent-rgb), 0.1); }
}

@keyframes pp-graph-breathe {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 0.9; transform: scale(1.1); }
}

/* Respect visitors who turn animations off */
@media (prefers-reduced-motion: reduce) {
  .published-container .graph-view-placeholder,
  .published-container .graph-view-placeholder::before,
  .published-container .graph-view-placeholder canvas {
    animation: none;
  }
}

/* ---- 6. Projects page ----
   Only pages with cssclasses: projects-page get this layout. */
.published-container:has(.projects-page) .site-footer,
.published-container:has(.projects-page) .page-header,
.published-container:has(.projects-page) .backlinks {
  display: none !important;
}

/* Let the center column grow wider than Publish's default reading width */
.published-container:has(.projects-page) .site-body-center-column {
  max-width: none !important;
}

.published-container:has(.projects-page) .markdown-preview-view {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Projects page: base */
.projects-page {
  --pp-mono: "Share Tech Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pp-sans: "Rajdhani", system-ui, sans-serif;

  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 7rem 1.5rem 6rem;
  color: var(--pp-text);
  font-family: var(--pp-sans);
  font-size: 1.1rem;
  line-height: 1.6;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(var(--pp-accent-rgb), 0.1), transparent 50%),
    var(--pp-bg);
}

.projects-page * {
  box-sizing: border-box;
}

.projects-page h1,
.projects-page h2,
.projects-page h3,
.projects-page p {
  border: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
}

.projects-page a,
.projects-page a.internal-link,
.projects-page a.external-link {
  color: inherit;
  text-decoration: none;
  background: none;
  padding-right: 0;
}

.projects-page a.external-link::after {
  display: none;
}

/* Projects page: floating pill navigation */
.projects-page .pp-nav {
  position: fixed;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(680px, calc(100% - 2rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.1rem;
  background: var(--pp-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(var(--pp-shadow-rgb), var(--pp-shadow-a)), 0 0 24px rgba(var(--pp-accent-rgb), 0.08);
}

.projects-page .pp-brand {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.projects-page .pp-links {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.projects-page .pp-links a {
  color: var(--pp-body);
  transition: color 0.15s ease;
}

.projects-page .pp-links a:hover {
  color: var(--pp-accent);
}

.projects-page .pp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pp-dot);
  box-shadow: 0 0 8px var(--pp-dot);
  animation: pp-pulse 2.4s ease-in-out infinite;
}

@keyframes pp-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Projects page: heading */
.projects-page .pp-title {
  font-family: var(--pp-mono);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--pp-text);
  text-shadow: 0 0 18px rgba(var(--pp-glow-rgb), var(--pp-glow-a));
  margin-bottom: 1.6rem;
}

.projects-page .pp-intro {
  max-width: 560px;
  color: var(--pp-body);
  font-size: 1.05rem;
  margin-bottom: 6rem;
}

/* Projects page: project rows */
.projects-page .pp-project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 8rem;
}

.projects-page .pp-project.reverse .pp-preview { order: 2; }

/* Preview box */
.projects-page .pp-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--pp-surface);
  border: 1px dashed var(--pp-dashed);
  border-radius: 18px;
  box-shadow: 0 0 40px rgba(var(--pp-accent-rgb), 0.06);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.projects-page .pp-project:hover .pp-preview {
  border-color: rgba(var(--pp-accent-rgb), 0.55);
  box-shadow: 0 0 50px rgba(var(--pp-accent-rgb), 0.16);
}

.projects-page .pp-num {
  position: absolute;
  top: 0.9rem;
  left: 1.2rem;
  font-family: var(--pp-mono);
  font-size: 2.4rem;
  color: rgba(var(--pp-accent-rgb), 0.2);
}

.projects-page .pp-spark {
  font-size: 2.6rem;
  line-height: 1;
  color: var(--pp-accent);
  text-shadow: 0 0 16px rgba(var(--pp-accent-rgb), 0.7);
}

.projects-page .pp-soon {
  font-family: var(--pp-mono);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--pp-faint);
}

/* Text column */
.projects-page .pp-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--pp-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pp-accent);
  margin-bottom: 1.6rem;
}

.projects-page .pp-name {
  font-family: var(--pp-mono);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--pp-text);
  margin-bottom: 1.4rem;
}

.projects-page .pp-tagline {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--pp-text);
  margin-bottom: 1rem;
}

.projects-page .pp-desc {
  font-family: var(--pp-mono);
  font-size: 0.85rem;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--pp-dim);
  max-width: 420px;
  margin-bottom: 1.4rem;
}

/* Tags */
.projects-page .pp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.projects-page .pp-tag {
  font-family: var(--pp-mono);
  font-size: 0.68rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--pp-dashed);
  border-radius: 999px;
  color: var(--pp-dim);
}

.projects-page .pp-tag.live {
  color: var(--pp-accent);
  border-color: var(--pp-accent);
  background: rgba(var(--pp-accent-rgb), 0.1);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.projects-page .pp-link {
  font-family: var(--pp-mono);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pp-accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.projects-page .pp-link:hover {
  border-bottom-color: var(--pp-accent);
}

/* Projects page: smaller screens */
/* Stack the rows on narrower screens (sidebars take up space) */
@media (max-width: 1100px) {
  .projects-page .pp-project {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 5rem;
  }
  .projects-page .pp-project.reverse .pp-preview { order: 0; }
}

/* On phones the pill sits at the bottom so it doesn't cover Publish's
   own header and menu button. */
@media (max-width: 760px) {
  .projects-page .pp-brand { display: none; }
  .projects-page .pp-nav {
    top: auto;
    bottom: 1rem;
    justify-content: center;
  }
  .projects-page .pp-links { gap: 0.7rem; font-size: 0.7rem; }
  .projects-page {
    padding-top: 3rem;
    padding-bottom: 7rem;
  }
}

/* Stop the nav dot pulsing for visitors who turn animations off */
@media (prefers-reduced-motion: reduce) {
  .projects-page .pp-dot { animation: none; }
}