theme.css

/**
 * Theme Name: CodeAzur Dark
 * Author: orvpagadua
 * Version: 1.0.0
 * Based on: https://notes.kodekloud.com/
 */

.theme-dark {
  /* Color Palette - Based on Slate & Sky Tailwind colors extracted from KodeKloud */
  --color-slate-950: #020617;
  --color-slate-900: #0F172A;
  --color-slate-800: #1E293B;
  --color-slate-700: #334155;
  --color-slate-400: #94A3B8;
  --color-slate-300: #CBD5E1;
  --color-slate-200: #E2E8F0;
  --color-slate-text-custom: #90a1b9;
  --color-slate-50: #F8FAFC;

  --color-sky-500: #0EA5E9;
  --color-sky-400: #38BDF8;

  --color-night-owl-bg: #011627;
  --color-night-owl-fg: #D6DEEB;

  /* Backgrounds */
  --background-primary: var(--color-slate-900);
  --background-primary-alt: var(--color-slate-950);
  --background-secondary: var(--color-slate-900);
  /* Keeping it flat like the site */
  --background-secondary-alt: var(--color-slate-950);
  --background-modifier-border: var(--color-slate-800);
  --background-modifier-form-field: var(--color-slate-800);

  /* Text */
  --text-normal: var(--color-slate-text-custom);

  --text-muted: var(--color-slate-400);
  --text-faint: var(--color-slate-700);
  --text-on-accent: #FFFFFF;
  --text-bold: #FFFFFF;

  /* Accents */
  --text-accent: var(--color-sky-500);
  --text-accent-hover: var(--color-sky-400);
  --interactive-accent: var(--color-sky-500);
  --interactive-accent-hover: var(--color-sky-400);

  /* Headers */
  --h1-color: #FFFFFF;
  --h2-color: #FFFFFF;
  --h3-color: #FFFFFF;
  --h4-color: #FFFFFF;

  /* Fenced Code Blocks (VS Code Dark+ Style) */
  --code-background: #1E1E1E;
  /* VS Code dark bg */
  --code-normal: #D4D4D4;
  /* Base text */
  --code-comment: #6A9955;
  /* Green */
  --code-function: #DCDCAA;
  /* Yellow */
  --code-keyword: #C586C0;
  /* Purple/Pink */
  --code-value: #CE9178;
  /* Orange (Strings) */
  --code-string: #CE9178;
  --code-number: #B5CEA8;
  --code-operator: #D4D4D4;
  --code-property: #9CDCFE;
  /* Light Blue */
  --code-tag: #569CD6;
  /* Blue */
  --code-variable: #9CDCFE;

  /* Inline Code Specifics */
  --code-inline-color: #00bcff;

  /* UI Elements */
  --tab-outline-color: var(--color-slate-800);
  --tab-text-color-focused: var(--text-normal);
  --tab-text-color: var(--text-muted);

  /* Typography */
  --font-text-theme: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-interface-theme: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-headers-theme: 'Lexend', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Global Font Smoothing */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
  /* Lighter body text */
}

/* Enhancements for a "Premium" feel */

/* Glassy headers maybe? No, let's stick to clean flat design first but add nice spacing */
/* Apply Lexend font to all headers */
.markdown-preview-view h1,
.cm-header-1,
.markdown-preview-view h2,
.cm-header-2,
.markdown-preview-view h3,
.cm-header-3,
.markdown-preview-view h4,
.cm-header-4,
.markdown-preview-view h5,
.cm-header-5,
.markdown-preview-view h6,
.cm-header-6 {
  font-family: var(--font-headers-theme);
  font-weight: 500;
  /* Smoother, lighter headers (was 600-700) */
}

.markdown-preview-view h1,
.cm-header-1 {
  font-weight: 600;
  /* Slight distinction for H1 */
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}

.markdown-preview-view h2,
.cm-header-2 {
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 1.5em;
}

/* Links */
a,
.cm-link,
.cm-hmd-internal-link,
a.internal-link {
  color: #00bcff !important;
  text-decoration: none;
  font-weight: 400;
  /* Lighter links (was 500) */
  transition: color 0.15s ease-in-out;
}

a:hover,
.cm-link:hover,
.cm-hmd-internal-link:hover {
  text-decoration: underline;
}

/* Blockquotes */
blockquote {
  border-left-color: var(--interactive-accent);
  background-color: rgba(14, 165, 233, 0.1);
  /* Sky-500 with opacity */
  padding: 0.5em 1em;
  border-radius: 0 4px 4px 0;
}

/* Code blocks rounded corners */
pre,
code {
  border-radius: 6px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* Inline Code Styling */
:not(pre)>code,
.cm-s-obsidian span.cm-inline-code {
  color: var(--code-inline-color) !important;
  background-color: rgba(0, 188, 255, 0.1);
  /* Subtle background tint */
}

/* Bold Text */
strong,
.cm-strong {
  color: var(--text-bold) !important;
  font-weight: 600;
  /* Reduced from 700 */
}

/* Table Styling - Horizontal Dividers Only + White Headers */
.markdown-preview-view table,
.markdown-source-view.mod-cm6 .cm-content table,
/* Target Live Preview */
.cm-table-widget,
/* Target Live Preview Widget */
table {
  border-collapse: collapse;
  border: none;
  table-layout: auto !important;
  /* Columns size to content */
  width: 100% !important;
  /* Table spans full width */
}

.markdown-preview-view th,
.markdown-preview-view td,
th,
td {
  border: none !important;
  border-bottom: 1px solid var(--background-modifier-border) !important;
  padding: 8px 16px;
}

/* Remove bottom border from last row to be cleaner */
.markdown-preview-view tr:last-child td {
  border-bottom: none !important;
}

.markdown-preview-view th,
th {
  color: #FFFFFF !important;
  font-weight: 600;
  background-color: transparent !important;
  /* Optional: Cleaner look */
  text-align: left;
}

/* Callouts - mimicking the nice info boxes often seen on documentation sites */
.callout {
  border-radius: 24px;
}

/* Sidebar adjustments */
.workspace-leaf-header-title {
  font-weight: 600;
  color: var(--text-muted);
}

/* Sidebar File Explorer Styling */

/* Folders - White */
.nav-folder-title-content {
  color: #FFFFFF !important;
  font-weight: 400;
  /* Lighter folders (was 500) */
}

/* Files - Muted Slate */
.nav-file-title-content {
  color: #90a1b9 !important;
}

/* Active File / Selected Item - Bright Cyan */
.nav-file-title.is-active .nav-file-title-content,
.nav-folder-title.is-active .nav-folder-title-content,
.tree-item-self.is-active {
  color: #00a6f4 !important;
  font-weight: 600;
  /* Optional: Add a subtle background to the active row for better visibility */
  background-color: rgba(0, 166, 244, 0.1);
}

/* -----------------------------------------------------
   FORCE VS CODE DARK+ SYNTAX HIGHLIGHTING (PRETTIER)
   ----------------------------------------------------- */

/* Editor (CodeMirror) & Preview (Prism/Obsidian) Mapping */

/* Keywords (pink/purple) */
.cm-keyword,
.token.keyword,
.cm-variable-2,
.token.selector,
.token.important,
.token.atrule {
  color: #C586C0 !important;
}

/* Control flow / Operators */
.cm-operator,
.token.operator {
  color: #D4D4D4 !important;
}

/* Functions (yellow) */
.cm-function,
.token.function,
.cm-def {
  color: #DCDCAA !important;
}

/* Strings (orange/brown) */
.cm-string,
.token.string,
.token.char,
.token.attr-value {
  color: #CE9178 !important;
}

/* Numbers (light green) */
.cm-number,
.token.number {
  color: #B5CEA8 !important;
}

/* Comments (green) */
.cm-comment,
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6A9955 !important;
}

/* Variables / Properties (light blue) */
.cm-property,
.token.property,
.cm-variable,
.token.variable {
  color: #9CDCFE !important;
}

/* Class names / Types (teal) */
.cm-type,
.token.class-name,
.cm-builtin {
  color: #4EC9B0 !important;
}

/* Tags (blue) */
.cm-tag,
.token.tag {
  color: #569CD6 !important;
}

/* HTML Attributes (light blue) */
.cm-attribute,
.token.attr-name {
  color: #9CDCFE !important;
}

/* Punctuation */
.cm-punctuation,
.token.punctuation {
  color: #D4D4D4 !important;
}

/* Code Block Background - Preview Mode */
.markdown-preview-view pre code {
  background-color: #1E1E1E !important;
}

/* Code Block Background - Live Preview (Source Mode) */
/* Only target the code block lines, not the whole scroller */
.markdown-source-view.mod-cm6 .cm-content .cm-line.HyperMD-codeblock {
  background-color: #1E1E1E !important;
  /* Optional: Add padding if needed for block look, though LP handles this line-by-line */
}

/* Ensure the main editor background stays transparent (inherits from theme) */
.markdown-source-view.mod-cm6 .cm-scroller {
  background-color: transparent !important;
}