/* ============================================================
   tesanti — Obsidian theme
   Port of the tesanti Design System.
   Minimal, editorial, high-contrast. Swiss-influenced.
   Palette: black, white, one signal red (#e1261c) — used sparingly.
   Type: Space Grotesk (display) · Inter (body/UI) · JetBrains Mono (data/eyebrows)
   Borders carry the weight; shadows are near-absent.
   ============================================================ */

/* --- Webfonts (Google-hosted; degrade to system fonts offline) --- */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* ============================================================
   1. SHARED TOKENS (mode-independent)
   Fonts, type scale, radii, borders, motion.
   ============================================================ */
body {
  /* ---- Accent: signal red #e1261c expressed as HSL so Obsidian derives
     interactive-accent, text-accent, checkboxes, focus, etc. from one source ---- */
  --accent-h: 3;
  --accent-s: 78%;
  --accent-l: 50%;

  /* ---- Font families ---- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text-theme: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-interface-theme: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-monospace-theme: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-text-size: 16px;
  --line-height-normal: 1.5;
  --line-height-tight: 1.2;

  /* ---- Headings: display face, medium weight, tight tracking ---- */
  --h1-font: var(--font-display);
  --h2-font: var(--font-display);
  --h3-font: var(--font-display);
  --h4-font: var(--font-interface-theme);
  --h5-font: var(--font-interface-theme);
  --h6-font: var(--font-monospace-theme);

  --h1-weight: 500;
  --h2-weight: 500;
  --h3-weight: 500;
  --h4-weight: 600;
  --h5-weight: 600;
  --h6-weight: 500;

  --h1-size: 2.25em;
  --h2-size: 1.7em;
  --h3-size: 1.35em;
  --h4-size: 1.12em;
  --h5-size: 1em;
  --h6-size: 0.8em;

  --h1-line-height: 1.08;
  --h2-line-height: 1.12;
  --h3-line-height: 1.2;

  /* ---- Radii: small. 6px is the maximum; cards/tags near-square ---- */
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-l: 6px;
  --radius-xl: 8px;
  --input-radius: 6px;
  --button-radius: 6px;
  --tab-radius: 4px;
  --tab-radius-active: 4px;
  --modal-radius: 6px;
  --checkbox-radius: 2px;
  --toggle-radius: 999px;      /* the one place a pill is allowed */
  --slider-thumb-radius: 999px;
  --meta-property-radius: 2px;

  /* ---- Borders: 1px hairline everywhere ---- */
  --border-width: 1px;
  --divider-width: 1px;
  --tab-outline-width: 1px;

  /* ---- Tags rendered as the signature mono all-caps eyebrow chip ---- */
  --tag-weight: 500;
  --tag-border-width: 1px;
  --tag-radius: 2px;
  --tag-decoration: none;
  --tag-decoration-hover: none;

  /* ---- Links: red, underline slides in on hover (no permanent rule) ---- */
  --link-decoration: none;
  --link-decoration-hover: underline;
  --link-decoration-thickness: 1px;
  --link-external-decoration: none;
  --link-external-decoration-hover: underline;

  /* ---- Blockquote: a black hairline rule, not a tinted block ---- */
  --blockquote-border-thickness: 2px;
  --blockquote-font-style: normal;

  /* ---- Callouts: hairline-bordered, low-key, editorial ---- */
  --callout-border-width: 1px;
  --callout-border-opacity: 1;
  --callout-radius: 4px;
  --callout-title-weight: 600;

  /* ---- Horizontal rule: a single hairline ---- */
  --hr-thickness: 1px;

  /* ---- Red caret — a status LED for the cursor ---- */
  --caret-color: var(--interactive-accent);
}

/* ============================================================
   2. LIGHT — the brand-true default (white canvas, ~95% of surface)
   ============================================================ */
.theme-light {
  /* Ink ramp */
  --ink-000: #ffffff;
  --ink-050: #f7f7f7;
  --ink-100: #ececec;
  --ink-200: #d9d9d9;
  --ink-300: #b8b8b8;
  --ink-400: #8a8a8a;
  --ink-500: #5e5e5e;
  --ink-600: #3d3d3d;
  --ink-700: #262626;
  --ink-900: #0a0a0a;

  /* Surfaces — content is white, chrome is a half-step off-white,
     separation carried by hairlines (see tesanti app UI kit) */
  --background-primary:        var(--ink-000);
  --background-primary-alt:    var(--ink-050);
  --background-secondary:      var(--ink-050);
  --background-secondary-alt:  var(--ink-100);

  --background-modifier-hover:        rgba(10, 10, 10, 0.045);
  --background-modifier-active-hover: rgba(10, 10, 10, 0.075);
  --background-modifier-border:       var(--ink-200);
  --background-modifier-border-hover: var(--ink-300);
  --background-modifier-border-focus: var(--interactive-accent);
  --background-modifier-form-field:   var(--ink-000);

  /* Text */
  --text-normal:   var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --text-on-accent: #ffffff;
  --text-accent:       var(--interactive-accent);
  --text-accent-hover: #c31c14;

  --text-selection:    hsla(3, 78%, 50%, 0.16);
  --text-highlight-bg: hsla(48, 100%, 50%, 0.28);

  --bold-color:   var(--ink-900);
  --italic-color: var(--text-normal);

  /* Interactive */
  --interactive-normal:      var(--ink-050);
  --interactive-hover:       var(--ink-100);
  --interactive-accent-hover: #c31c14;

  /* Structure */
  --divider-color: var(--ink-200);
  --hr-color:      var(--ink-200);

  /* Headings — near-black, uniform */
  --h1-color: var(--ink-900);
  --h2-color: var(--ink-900);
  --h3-color: var(--ink-900);
  --h4-color: var(--ink-900);
  --h5-color: var(--ink-900);
  --h6-color: var(--ink-500);
  --heading-formatting: var(--ink-300);

  /* Links */
  --link-color:       var(--interactive-accent);
  --link-color-hover: #c31c14;
  --link-external-color:       var(--interactive-accent);
  --link-external-color-hover: #c31c14;
  --link-unresolved-color:   var(--ink-400);
  --link-unresolved-opacity: 1;

  /* Tags */
  --tag-color:              var(--ink-500);
  --tag-color-hover:        var(--ink-900);
  --tag-background:         transparent;
  --tag-background-hover:   var(--ink-050);
  --tag-border-color:       var(--ink-200);
  --tag-border-color-hover: var(--interactive-accent);

  /* Code */
  --code-background: var(--ink-050);
  --code-normal:     var(--ink-700);

  /* Blockquote */
  --blockquote-border-color:     var(--ink-900);
  --blockquote-color:            var(--ink-500);
  --blockquote-background-color: transparent;

  /* Navigation */
  --nav-item-color:            var(--ink-600);
  --nav-item-color-hover:      var(--ink-900);
  --nav-item-color-active:     var(--ink-900);
  --nav-item-background-hover:  rgba(10, 10, 10, 0.045);
  --nav-item-background-active: var(--ink-100);
  --nav-item-weight-active:    500;
  --nav-indentation-guide-color: var(--ink-100);

  /* Chrome */
  --titlebar-background:         var(--ink-050);
  --titlebar-background-focused: var(--ink-000);
  --titlebar-text-color:         var(--ink-500);
  --ribbon-background:           var(--ink-050);
  --tab-background-active:       var(--ink-000);
  --tab-text-color-focused-active: var(--ink-900);
  --tab-outline-color:           var(--ink-200);
  --status-bar-background:       var(--ink-050);
  --status-bar-text-color:       var(--ink-500);

  /* Scrollbar */
  --scrollbar-thumb-bg:        rgba(10, 10, 10, 0.16);
  --scrollbar-active-thumb-bg: rgba(10, 10, 10, 0.32);
  --scrollbar-bg:              transparent;

  /* Restrained shadows — a hairline where a shadow would do */
  --shadow-s: 0 1px 0 rgba(0, 0, 0, 0.04);
  --shadow-l: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* Graph view */
  --graph-line:            var(--ink-200);
  --graph-node:            var(--ink-700);
  --graph-node-focused:    var(--interactive-accent);
  --graph-node-tag:        var(--interactive-accent);
  --graph-node-unresolved: var(--ink-300);
}

/* ============================================================
   3. DARK — inverted ink ramp. Black canvas, same signal red.
   ============================================================ */
.theme-dark {
  /* Ink ramp (inverted usage) */
  --ink-000: #ffffff;
  --ink-050: #f7f7f7;
  --ink-100: #ececec;
  --ink-200: #b8b8b8;
  --ink-400: #8a8a8a;
  --ink-500: #5e5e5e;
  --ink-600: #3d3d3d;
  --ink-700: #262626;
  --ink-800: #161616;
  --ink-900: #0a0a0a;
  --ink-999: #000000;

  /* Surfaces — content near-black, chrome pure black; hairlines separate */
  --background-primary:        var(--ink-900);
  --background-primary-alt:    var(--ink-800);
  --background-secondary:      var(--ink-999);
  --background-secondary-alt:  var(--ink-800);

  --background-modifier-hover:        rgba(236, 236, 236, 0.06);
  --background-modifier-active-hover: rgba(236, 236, 236, 0.10);
  --background-modifier-border:       var(--ink-700);
  --background-modifier-border-hover: var(--ink-600);
  --background-modifier-border-focus: var(--interactive-accent);
  --background-modifier-form-field:   var(--ink-800);

  /* Text */
  --text-normal:   var(--ink-100);
  --text-muted:    var(--ink-400);
  --text-faint:    var(--ink-500);
  --text-on-accent: #ffffff;
  --text-accent:       var(--interactive-accent);
  --text-accent-hover: #ff4d43;

  --text-selection:    hsla(3, 78%, 50%, 0.30);
  --text-highlight-bg: hsla(48, 100%, 50%, 0.30);

  --bold-color:   #ffffff;
  --italic-color: var(--text-normal);

  /* Interactive */
  --interactive-normal:      var(--ink-800);
  --interactive-hover:       var(--ink-700);
  --interactive-accent-hover: #ff4d43;

  /* Structure */
  --divider-color: var(--ink-700);
  --hr-color:      var(--ink-700);

  /* Headings */
  --h1-color: var(--ink-050);
  --h2-color: var(--ink-050);
  --h3-color: var(--ink-050);
  --h4-color: var(--ink-050);
  --h5-color: var(--ink-050);
  --h6-color: var(--ink-400);
  --heading-formatting: var(--ink-600);

  /* Links */
  --link-color:       var(--interactive-accent);
  --link-color-hover: #ff4d43;
  --link-external-color:       var(--interactive-accent);
  --link-external-color-hover: #ff4d43;
  --link-unresolved-color:   var(--ink-500);
  --link-unresolved-opacity: 1;

  /* Tags */
  --tag-color:              var(--ink-400);
  --tag-color-hover:        var(--ink-050);
  --tag-background:         transparent;
  --tag-background-hover:   var(--ink-800);
  --tag-border-color:       var(--ink-700);
  --tag-border-color-hover: var(--interactive-accent);

  /* Code */
  --code-background: var(--ink-800);
  --code-normal:     var(--ink-200);

  /* Blockquote */
  --blockquote-border-color:     var(--ink-100);
  --blockquote-color:            var(--ink-400);
  --blockquote-background-color: transparent;

  /* Navigation */
  --nav-item-color:            var(--ink-400);
  --nav-item-color-hover:      var(--ink-050);
  --nav-item-color-active:     var(--ink-050);
  --nav-item-background-hover:  rgba(236, 236, 236, 0.06);
  --nav-item-background-active: var(--ink-800);
  --nav-item-weight-active:    500;
  --nav-indentation-guide-color: var(--ink-800);

  /* Chrome */
  --titlebar-background:         var(--ink-999);
  --titlebar-background-focused: var(--ink-900);
  --titlebar-text-color:         var(--ink-400);
  --ribbon-background:           var(--ink-999);
  --tab-background-active:       var(--ink-900);
  --tab-text-color-focused-active: var(--ink-050);
  --tab-outline-color:           var(--ink-700);
  --status-bar-background:       var(--ink-999);
  --status-bar-text-color:       var(--ink-400);

  /* Scrollbar */
  --scrollbar-thumb-bg:        rgba(236, 236, 236, 0.14);
  --scrollbar-active-thumb-bg: rgba(236, 236, 236, 0.30);
  --scrollbar-bg:              transparent;

  /* Shadows — deeper on black, still short and uncolored */
  --shadow-s: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-l: 0 2px 10px rgba(0, 0, 0, 0.5);

  /* Graph view */
  --graph-line:            var(--ink-700);
  --graph-node:            var(--ink-200);
  --graph-node-focused:    var(--interactive-accent);
  --graph-node-tag:        var(--interactive-accent);
  --graph-node-unresolved: var(--ink-600);
}

/* ============================================================
   4. COMPONENT POLISH — the bits variables alone can't express
   ============================================================ */

/* ---- Headings: tight display tracking (Swiss editorial) ---- */
.markdown-rendered :is(h1, h2, h3),
.cm-s-obsidian :is(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3) {
  letter-spacing: -0.02em;
}
.markdown-rendered :is(h4, h5),
.cm-s-obsidian :is(.HyperMD-header-4, .HyperMD-header-5) {
  letter-spacing: -0.005em;
}

/* h6 becomes a muted mono eyebrow (all-caps, wide-tracked) */
.markdown-rendered h6,
.cm-s-obsidian .HyperMD-header-6 .cm-header-6 {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-monospace-theme);
}

/* ---- Tags: the signature all-caps mono eyebrow chip with a red dot ---- */
.markdown-rendered a.tag,
.cm-s-obsidian .cm-hashtag {
  font-family: var(--font-monospace-theme);
  font-size: 0.72em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  line-height: 1;
  padding: 0.28em 0.55em;
  border: 1px solid var(--tag-border-color);
  border-radius: 2px;
  vertical-align: middle;
}
/* Reading view — red leading dot ( • SOURCE ) */
.markdown-rendered a.tag::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.5em;
  border-radius: 999px;
  background: var(--interactive-accent);
  vertical-align: middle;
}
/* Live-preview hashtag: seam the split # + name and tint the # red as the "dot" */
.cm-s-obsidian .cm-hashtag-begin {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  color: var(--interactive-accent);
  padding-right: 0;
}
.cm-s-obsidian .cm-hashtag-end {
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 0.4em;
}

/* ---- Inline code & code blocks: hairline-bordered gray panels ---- */
.markdown-rendered code {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  padding: 0.12em 0.35em;
}
.markdown-rendered pre {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
}
.markdown-rendered pre > code {
  border: none;
  padding: 0;
}

/* ---- Active tab: a 2px red top rule (the "active/selected" red state) ---- */
.workspace-tab-header.is-active.mod-active {
  box-shadow: inset 0 2px 0 0 var(--interactive-accent);
}

/* ---- Active file in the explorer: a 2px red left rule ---- */
.nav-file-title.is-active,
.workspace-leaf.mod-active .nav-file-title.is-active {
  box-shadow: inset 2px 0 0 0 var(--interactive-accent);
}

/* ---- Eyebrow-style tag pane & outline headers stay quiet ---- */
.status-bar {
  font-family: var(--font-monospace-theme);
  font-size: 11px;
  letter-spacing: 0.06em;
  border-top: 1px solid var(--divider-color);
}

/* ---- Selection: a red wash (readable over live text; on-brand accent) ---- */
::selection {
  background: hsla(3, 78%, 50%, 0.22);
}

/* ---- Checkbox: near-square, red when checked (via accent) ---- */
input[type="checkbox"] {
  border-radius: var(--checkbox-radius);
}

/* ---- Tables: hairline grid, mono-ish numeric feel kept via defaults ---- */
.markdown-rendered table {
  border: 1px solid var(--background-modifier-border);
}
.markdown-rendered th {
  font-weight: 600;
  background: var(--background-secondary);
}

/* ---- Blockquotes: no tint, just the rule ---- */
.markdown-rendered blockquote {
  padding-left: 1em;
}