@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,400;1,700&display=swap');
@import url('https://rsms.me/inter/inter.css');

body {
	--radius-s: 0px;
	--radius-m: 0px;
	--radius-l: 0px;
	--input-radius: 0px;
	--tab-radius-active: 0px;
	--checkbox-radius: 0px;
	--toggle-radius: 0px;
	--toggle-thumb-radius: 0px;
	--slider-thumb-radius: 0px;
}

.workspace-tab-header.is-active::before, .workspace-tab-header.is-active::after {
	display: none;
}

svg * {
	stroke-linecap: square;
	stroke-linejoin: miter;
	rx: 0;
	ry: 0;
}

.menu {
	padding: var(--size-2-1);
}

.menu-item {
	padding: var(--size-4-1) var(--size-4-2);
}

.menu-separator {
	margin: var(--size-2-1) calc(var(--size-2-1) * -1);
}

/* This targets the app when in dark mode */
.theme-dark {
  --background-primary: #0f0f0f;
  --background-secondary: #000000;
  --text-normal: #ffffff;
  --accent-component: #E89B3D; /* Your main "brand" color */
}

/* This targets the app when in light mode */
.theme-light {
  --background-primary: #ffffff;
  --text-normal: #000000;
  --accent-component: #E89B3D;
}



/* Applies a textured overlay using an image file to the entire app window.
*/
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  
  /* Your specific image URL */
  background-image: url("https://storage.googleapis.com/msgsndr/GqmlHe7lskkzMX4vIiWJ/media/6952dfd27b03bf7ccd417aaf.jpg");
  
  /* Ensures the texture tiles seamlessly across the screen */
  background-repeat: repeat;
  /* Optional: Change size if the pattern looks too repetitive. Try 500px or auto */
  background-size: auto; 
  
  /* CRITICAL SETTINGS */
  
  /* 1. Let clicks pass through the image to the app underneath */
  pointer-events: none;
  
  /* 2. Put it on top of almost everything */
  z-index: 9999;
  
  /* 3. Blending. Since the image is dark gray: */
  /* 'overlay' or 'soft-light' usually works best for both dark and light themes. */
  mix-blend-mode: soft-light;
  
  /* 4. Intensity. That image is quite heavy, so keep opacity low. */
  /* Try between 0.05 (very subtle) and 0.2 (heavy grit) */
  opacity: 0.25;
}

/* 1. IMPORT INTER FONT */


/* 2. GLOBAL TYPOGRAPHY & INTER FORCING */
:root {
    /* This overrides Obsidian's internal font variables */
    --font-text: 'Inter', sans-serif;
    --font-interface: 'Inter', sans-serif;
    --font-editor: 'Inter', sans-serif;
}

body, .view-content, .cm-editor, .nav-files-container {
    font-family: 'Inter', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Specifically targeting the Editor and Reading views */
.markdown-source-view.mod-cm6 .cm-content,
.markdown-rendered {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400; /* Normal Inter weight */
    line-height: 1.6; /* Improved breathing room for long notes */
    letter-spacing: 0.01em;
}

/* Ensuring the Sidebar and UI follow suit */
.nav-file-title, .nav-folder-title, .tree-item-self {
    font-family: 'Inter', sans-serif !important;
}

/* 3. HEADINGS: INTER BLACK (900) */
/* 1. UPDATED SHARED LOOK */
/* 1. SHARED HEADING LOGIC */
.view-content :is(.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6, h1, h2, h3, h4, h5, h6) {
  font-family: 'Inter', sans-serif;
  font-weight: 900; 
  letter-spacing: 0.05em; 
  
  /* Use the specific color and haze variables defined below */
  color: var(--h-color) !important;
  
  /* The text shadow scale (Inner Haze) */
  text-shadow: 0 0 calc(var(--h-haze) * 1.5) rgba(255, 255, 255, 0.15);
  
  /* The bloom scale (Outer Haze) */
  filter: drop-shadow(0 0 var(--h-haze) rgba(255, 255, 255, 0.1));
}

/* 2. THE TAPERED SCALE (Brilliant White to Ghostly Silver) */

/* H1: Brilliant White */
.view-content :is(.cm-header-1, h1) { 
  --h-color: #ffffff; 
  --h-haze: 8px; 
  font-size: 2.2em; 
}

/* H2: Off-White */
.view-content :is(.cm-header-2, h2) { 
  --h-color: #f2f2f2; 
  --h-haze: 6px; 
  font-size: 1.8em; 
}

/* H3: Light Silver */
.view-content :is(.cm-header-3, h3) { 
  --h-color: #e6e6e6; 
  --h-haze: 5px; 
}

/* H4: Silver */
.view-content :is(.cm-header-4, h4) { 
  --h-color: #cccccc; 
  --h-haze: 4px; 
}

/* H5: Muted Silver */
.view-content :is(.cm-header-5, h5) { 
  --h-color: #bdbdbd; 
  --h-haze: 3px; 
}

/* H6: Dim Silver (Ghostly) */
.view-content :is(.cm-header-6, h6) { 
  --h-color: #afafaf; 
  --h-haze: 2px; 
}

/* Maintain font size scaling but remove the heavy color bloom */
.view-content :is(.cm-header-1, h1) { font-size: 2.2em; }
.view-content :is(.cm-header-2, h2) { font-size: 1.8em; }

/* Apply the Amber Glow to specific syntax elements */
/* 1. SHARED AMBER GLOW (Bolds, Underlines, Hashtags) */
.cm-s-obsidian span.cm-strong, 
.cm-s-obsidian span.cm-hashtag,
.cm-s-obsidian span.cm-underline,
strong, .hashtag, u {
  color: var(--accent-component) !important;
  font-weight: 700;
  text-shadow: 0 0 1px rgba(255, 50, 50, 0.6), 0 0 3px var(--accent-component);
  filter: drop-shadow(0 0 4px rgba(232, 155, 61, 0.4));
}

/* 2. SPECIFIC ITALICS: CORMORANT GARAMOND */
.cm-s-obsidian span.cm-em, 
em {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  font-weight: 600; /* Slightly heavier to stand up to the glow */
  font-size: 1.15em; /* Serif fonts often look smaller than sans-serifs */
  color: var(--accent-component) !important;
  
  /* Keeping your signature amber glow */
  text-shadow: 
    0 0 1px rgba(255, 50, 50, 0.5), 
    0 0 3px var(--accent-component);
  
  filter: drop-shadow(0 0 4px rgba(232, 155, 61, 0.3));
}

/* TARGET THE PAGE TITLE (Inline Title) */
.inline-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  color: var(--accent-component) !important;
  letter-spacing: 0.05em;
  
  /* Apply the same "Halation" and Bloom as your Bolds */
  text-shadow: 
    0 0 1px rgba(255, 50, 50, 0.6), 
    0 0 3px var(--accent-component);
  
  /* Matches the atmospheric bloom of your inline text */
  filter: drop-shadow(0 0 4px rgba(232, 155, 61, 0.4));
  
  /* Optional: Make it slightly larger than H1 for extra impact */
  font-size: 2.5em !important;
  margin-bottom: 0.5em !important;
}

/* ========================================= */
/* EMBEDDED IMAGE STYLING (Perfect Bloom)    */
/* ========================================= */

.image-embed img, .internal-embed img {
    background-color: transparent !important;
    box-shadow: none !important;

    /* THE LAYERED BLOOM STACK */
    filter: 
        /* 1. Base levels: keep the white "punchy" but the image "in" the screen */
        brightness(0.95) 
        contrast(1.1)
        
        /* 2. TIGHT WHITE CORE: prevents the amber from washing out the letters */
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.4))
        
        /* 3. MID AMBER GLOW: the primary neon effect */
        drop-shadow(0 0 4px rgba(232, 155, 61, 0.25))
        
        /* 4. WIDE ATMOSPHERIC BLOOM: the faint, hazy "pretty" glow */
        drop-shadow(0 0 12px rgba(232, 155, 61, 0.1));

    /* Layout & Integration */
    margin: 2.5em auto;
    display: block;
    max-width: 85%;
    border-radius: 2px;
    
    /* Smooth transition for when you hover */
    transition: filter 0.5s ease;
}

/* HOVER: The "Active State" - slightly more vibrant */
.image-embed img:hover, .internal-embed img:hover {
    filter: 
        brightness(1.05) 
        contrast(1.1)
        drop-shadow(0 0 2px rgba(255, 255, 255, 0.5))
        drop-shadow(0 0 6px rgba(232, 155, 61, 0.35))
        drop-shadow(0 0 20px rgba(232, 155, 61, 0.15));
}

/* =========================================================
   OBSIDIAN PUBLISH FIXES
   - Headings + page title match desktop intent
   - Blockquote (>) left bar uses your orange, not purple
   ========================================================= */

/* 1) Make sure Publish uses your orange as the real "accent" */
:root,
.theme-dark,
.theme-light {
  --interactive-accent: var(--accent-component);
  --text-accent: var(--accent-component);
  --color-accent: var(--accent-component);

  /* Blockquote variables (Publish/Obsidian use these in places) */
  --blockquote-border-color: var(--accent-component);
  --blockquote-border-thickness: 4px;
}

/* 2) HEADINGS — Publish doesn’t have .view-content, so target the rendered HTML */
.markdown-rendered :is(h1, h2, h3, h4, h5, h6),
.publish-renderer :is(h1, h2, h3, h4, h5, h6),
.published-container :is(h1, h2, h3, h4, h5, h6) {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;

  /* fall back safely if your per-heading vars aren’t set */
  color: var(--h-color, #ffffff) !important;

  text-shadow: 0 0 calc(var(--h-haze, 4px) * 1.5) rgba(255, 255, 255, 0.15);
  filter: drop-shadow(0 0 var(--h-haze, 4px) rgba(255, 255, 255, 0.1));
}

/* 2a) Your tapered scale (Publish version) */
.markdown-rendered h1,
.publish-renderer h1,
.published-container h1 { --h-color: #ffffff; --h-haze: 8px; font-size: 2.2em !important; }

.markdown-rendered h2,
.publish-renderer h2,
.published-container h2 { --h-color: #f2f2f2; --h-haze: 6px; font-size: 1.8em !important; }

.markdown-rendered h3,
.publish-renderer h3,
.published-container h3 { --h-color: #e6e6e6; --h-haze: 5px; }

.markdown-rendered h4,
.publish-renderer h4,
.published-container h4 { --h-color: #cccccc; --h-haze: 4px; }

.markdown-rendered h5,
.publish-renderer h5,
.published-container h5 { --h-color: #bdbdbd; --h-haze: 3px; }

.markdown-rendered h6,
.publish-renderer h6,
.published-container h6 { --h-color: #afafaf; --h-haze: 2px; }

/* 3) PAGE TITLE — Publish may not expose .inline-title reliably, so hit common title patterns */
.inline-title,
.published-container .inline-title,
.publish-renderer .inline-title,
.published-container .page-header-title,
.published-container header h1,
.publish-renderer header h1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  color: var(--accent-component) !important;
  letter-spacing: 0.05em !important;

  text-shadow:
    0 0 1px rgba(255, 50, 50, 0.6),
    0 0 3px var(--accent-component);

  filter: drop-shadow(0 0 4px rgba(232, 155, 61, 0.4));
  font-size: 2.5em !important;
  margin-bottom: 0.5em !important;
}

/* 4) BLOCKQUOTE (>) — force orange bar instead of Publish accent purple */
.markdown-rendered blockquote,
.publish-renderer blockquote,
.published-container blockquote {
  border-left: var(--blockquote-border-thickness) solid var(--accent-component) !important;
}

/* Optional: if Publish theme adds a colored “quote mark”/decoration */
.markdown-rendered blockquote::before,
.publish-renderer blockquote::before,
.published-container blockquote::before {
  color: var(--accent-component) !important;
}

/* =========================================================
   FORCE PAGE TITLES TO ORANGE (PUBLISH-SAFE)
   ========================================================= */

/* Publish page title – highest reliability selectors */
.published-container .page-header,
.published-container .page-header-title,
.published-container header .inline-title,
.publish-renderer .page-header-title,
.publish-renderer header h1:first-of-type {
  color: var(--accent-component) !important;
}

/* Fallback: first H1 on a page (Publish sometimes uses this) */
.published-container .markdown-rendered > h1:first-child,
.publish-renderer .markdown-rendered > h1:first-child {
  color: var(--accent-component) !important;
}

/* Reinforce glow so it visually matches desktop */
.published-container .page-header-title,
.publish-renderer .page-header-title,
.published-container header h1:first-of-type {
  text-shadow:
    0 0 2px rgba(232, 155, 61, 0.6),
    0 0 6px rgba(232, 155, 61, 0.4),
    0 0 12px rgba(232, 155, 61, 0.25);
}