/* ==========================================================================
   Kritul theme — matches the main portfolio (assets/css/styles.css).
   Dark-mode-first; Inter + JetBrains Mono; blue/teal accent.

   Loaded AFTER the export's own stylesheets so these tokens win the
   cascade (`body.theme-dark` is more specific than `.theme-dark`).

   NOTE: this file and the <link> in each exported page must be re-applied
   after every Obsidian re-export.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

html {
  background-color: #08111F;
}

html:has(body.theme-light) {
  background-color: #FFFFFF;
}

body {
  --font-interface: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-monospace: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

/* ---- Dark (default, matches homepage) ---- */
body.theme-dark {
  --color-base-00: #08111F;
  --color-base-10: #0B1524;
  --color-base-20: #0F1D31;
  --color-base-25: #132338;
  --color-base-30: #1B2B44;
  --color-base-35: #2A3F5F;
  --color-base-40: #2A3F5F;
  --color-base-50: #8496B2;
  --color-base-60: #8496B2;
  --color-base-70: #A8B8CF;
  --color-base-100: #EEF3FA;

  --accent-h: 213;
  --accent-s: 100%;
  --accent-l: 68%;
  --color-accent: #5EA5FF;
  --color-accent-1: #5EA5FF;
  --color-accent-2: #2563EB;
  --interactive-accent: #5EA5FF;
  --interactive-accent-hover: #2563EB;
  --text-accent: #5EA5FF;
  --text-accent-hover: #2563EB;

  --color-green: #34D9C4;
  --h1-color-theme: #EEF3FA;
  --h2-color-theme: #5EA5FF;
  --h3-color-theme: #5EA5FF;
  --h4-color-theme: #8496B2;
  --h5-color-theme: #8496B2;
  --h6-color-theme: #8496B2;
  --inline-title-color: #EEF3FA;
}

/* ---- Light (toggle stays usable, on-brand) ---- */
body.theme-light {
  --color-base-00: #FFFFFF;
  --color-base-05: #F7FAFE;
  --color-base-10: #F3F7FC;
  --color-base-20: #E9F0F9;
  --color-base-25: #E9F0F9;
  --color-base-30: #C7D6EA;
  --color-base-35: #AFC3DE;
  --color-base-40: #AFC3DE;
  --color-base-50: #5F7290;
  --color-base-60: #5F7290;
  --color-base-70: #44546F;
  --color-base-100: #0F1D31;

  --accent-h: 222;
  --accent-s: 82%;
  --accent-l: 53%;
  --color-accent: #2563EB;
  --color-accent-1: #2563EB;
  --color-accent-2: #5EA5FF;
  --interactive-accent: #2563EB;
  --interactive-accent-hover: #1D4ED8;
  --text-accent: #2563EB;
  --text-accent-hover: #1D4ED8;

  --color-green: #0F766E;
  --h1-color-theme: #0F1D31;
  --h2-color-theme: #2563EB;
  --h3-color-theme: #2563EB;
  --h4-color-theme: #44546F;
  --h5-color-theme: #44546F;
  --h6-color-theme: #44546F;
  --inline-title-color: #0F1D31;
}