/* =========================================================================
   stevewatson.net  .  Obsidian Publish theme
   Hardware Security Notebook

   Dark is the primary target; light is a warm-paper companion.
   Most of the work is done by overriding Obsidian's own CSS variables,
   so the theme rides along with future Publish updates. The component
   rules below only handle what variables cannot express.

   Tokens are the single source of truth. To retheme, edit section 1.
   ========================================================================= */

/* ---- 1. Design tokens (dark, primary) ---------------------------------- */
body,
.theme-dark {
  --sw-bg:        #101418;
  --sw-bg-2:      #171C22;
  --sw-panel:     #141A20;
  --sw-border:    #2A323B;
  --sw-text:      #D7DDE3;
  --sw-muted:     #9AA6B2;
  --sw-faint:     #6F7A86;
  --sw-accent:    #5FB3C8;
  --sw-accent-h:  #7CCDDD;
  --sw-amber:     #D8A657;
  --sw-code-bg:   #0C1116;
  --sw-hl:        rgba(95, 179, 200, 0.13);

  /* Drives Obsidian's computed --color-accent (nav active, UI, controls).
     HSL of #5FB3C8. Body links use --link-color below; this fixes the rest. */
  --accent-h: 192;
  --accent-s: 49%;
  --accent-l: 58%;
}

/* ---- 1b. Design tokens (light: warm paper) ----------------------------- */
.theme-light {
  --sw-bg:        #FBFAF5;
  --sw-bg-2:      #F1EFE7;
  --sw-panel:     #F6F4ED;
  --sw-border:    #E3E0D5;
  --sw-text:      #282C31;
  --sw-muted:     #586069;
  --sw-faint:     #8B929B;
  --sw-accent:    #2E8296;
  --sw-accent-h:  #20697B;
  --sw-amber:     #8A6210;
  --sw-code-bg:   #F0EDE4;
  --sw-hl:        rgba(46, 130, 150, 0.11);

  /* HSL of #2E8296 for the deeper light-mode accent. */
  --accent-h: 192;
  --accent-s: 53%;
  --accent-l: 38%;
}

/* ---- 2. Map tokens onto Obsidian's variables --------------------------- */
body {
  /* Typography: system sans for body, mono for the many hardware tokens */
  --font-text-theme: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --font-monospace-theme: "SF Mono", Consolas, "Liberation Mono", ui-monospace, monospace;
  --font-text-size: 16.5px;
  --line-height-normal: 1.72;

  /* Long-form reading width */
  --file-line-width: 820px;

  /* Surfaces */
  --background-primary:       var(--sw-bg);
  --background-primary-alt:   var(--sw-bg-2);
  --background-secondary:     var(--sw-bg-2);
  --background-secondary-alt: var(--sw-panel);
  --background-modifier-border:       var(--sw-border);
  --background-modifier-border-hover: var(--sw-border);
  --background-modifier-border-focus: var(--sw-accent);

  /* Text */
  --text-normal:       var(--sw-text);
  --text-muted:        var(--sw-muted);
  --text-faint:        var(--sw-faint);
  --text-on-accent:    var(--sw-bg);
  --text-selection:    var(--sw-hl);
  --text-highlight-bg: rgba(216, 166, 87, 0.22);   /* ==highlight== uses amber */

  /* Accent: one restrained blue-cyan, links + active nav + subtle marks */
  --text-accent:       var(--sw-accent);
  --text-accent-hover: var(--sw-accent-h);
  --interactive-accent:       var(--sw-accent);
  --interactive-accent-hover: var(--sw-accent-h);
  --link-color:        var(--sw-accent);
  --link-color-hover:  var(--sw-accent-h);
  --link-external-color:       var(--sw-accent);
  --link-external-color-hover: var(--sw-accent-h);
  --link-decoration: underline;

  /* Headings: documentation scale, restrained (no marketing type) */
  --h1-size: 31px; --h1-weight: 650; --h1-color: var(--sw-text);
  --h2-size: 20px; --h2-weight: 620; --h2-color: var(--sw-text);
  --h3-size: 16px; --h3-weight: 640; --h3-color: var(--sw-text);
  --h4-size: 14px; --h4-weight: 640; --h4-color: var(--sw-muted);
  --bold-color: var(--sw-text);
  --bold-weight: 640;

  /* Code: workbench artifacts */
  --code-background: var(--sw-code-bg);
  --code-normal: var(--sw-text);
  --code-size: 0.85em;

  /* Radii */
  --radius-s: 5px;
  --radius-m: 8px;
  --radius-l: 10px;

  /* Callout colors (Obsidian expects RGB triplets) */
  --callout-tip:       95, 179, 200;    /* accent */
  --callout-note:      95, 179, 200;
  --callout-info:      95, 179, 200;
  --callout-warning:   216, 166, 87;    /* amber, reserved for cautions */
  --callout-important: 216, 166, 87;
  --callout-radius: 9px;

  /* Graph view */
  --graph-line: var(--sw-border);
  --graph-node: var(--sw-muted);
  --graph-text: var(--sw-faint);
  --graph-node-focused: var(--sw-accent);
}

/* ---- 3. Component polish ----------------------------------------------- */

/* Headings: a quiet rule under H2, tighter H1 tracking */
.markdown-rendered h1 { letter-spacing: -0.013em; line-height: 1.18; }
.markdown-rendered h2 {
  border-bottom: 1px solid var(--sw-border);
  padding-bottom: 8px;
  letter-spacing: -0.005em;
}

/* Links: clearly identifiable, hover improves readability not effects.
   Wikilinks read solid; external links get a small arrow, no icon box. */
.markdown-rendered a.internal-link {
  text-decoration-color: color-mix(in srgb, var(--sw-accent) 45%, transparent);
  text-underline-offset: 3px;
}
.markdown-rendered a.external-link {
  background: none;
  padding-right: 0;
}
.markdown-rendered a.external-link::after {
  content: "\2197";
  font-size: 0.7em;
  margin-left: 1px;
  color: var(--sw-faint);
  vertical-align: 0.28em;
}

/* Code */
.markdown-rendered code {
  border: 1px solid var(--sw-border);
  border-radius: 4px;
  padding: 1.5px 5px;
}
.markdown-rendered pre {
  border: 1px solid var(--sw-border);
  border-radius: 9px;
}

/* Callouts: understated left-accent bar, teaching tools not decoration */
.markdown-rendered .callout {
  background: var(--sw-panel);
  border: 1px solid var(--sw-border);
  border-left: 3px solid rgb(var(--callout-color));
  border-radius: 9px;
}
.markdown-rendered .callout-title { font-size: 13.5px; letter-spacing: 0.02em; }

/* Tables: dense technical information, minimal chrome */
.markdown-rendered table { border-collapse: collapse; font-size: 13.5px; }
.markdown-rendered thead th {
  background: var(--sw-bg-2);
  color: var(--sw-muted);
  font-family: var(--font-monospace-theme);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--sw-border);
}
.markdown-rendered tbody td {
  border-bottom: 1px solid var(--sw-border);
  color: var(--sw-muted);
  vertical-align: top;
}
.markdown-rendered tbody tr td:first-child { color: var(--sw-text); }
.markdown-rendered tbody tr:hover td { background: var(--sw-panel); }

/* Blockquotes */
.markdown-rendered blockquote {
  border-left: 2px solid var(--sw-border);
  color: var(--sw-muted);
  font-style: normal;
}

/* Properties / frontmatter (shown on knowledge pages; toggle in Publish) */
.markdown-rendered .metadata-container {
  background: var(--sw-panel);
  border: 1px solid var(--sw-border);
  border-radius: 9px;
  padding: 10px 14px;
}
.metadata-property-key {
  color: var(--sw-faint);
  font-family: var(--font-monospace-theme);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}

/* Tags as mono chips */
.markdown-rendered a.tag {
  background: var(--sw-bg-2);
  border: 1px solid var(--sw-border);
  color: var(--sw-muted);
  font-family: var(--font-monospace-theme);
  font-size: 11px;
  border-radius: 5px;
  padding: 2px 7px;
}

/* Site chrome */
.site-body-left-column,
.site-body-right-column { background: var(--sw-bg); }
.site-header { background: var(--sw-bg-2); border-bottom: 1px solid var(--sw-border); }

/* Site logo (uploaded in Site options). Publish renders it large by default;
   constrain it to a small mark. Adjust the 56px to taste. */
.site-body-left-column-site-logo,
img.site-body-left-column-site-logo {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain;
  border-radius: 10px;
  float: left;             /* sit the logo beside the name */
  margin-right: 12px;
}
/* Everything after the logo drops below it, EXCEPT the site name,
   which we keep on the same row. */
.site-body-left-column-site-logo ~ * { clear: left; }
.site-body-left-column-site-name {
  clear: none;
  padding-top: 10px;       /* vertically center against the logo */
  font-size: 15px;
  font-weight: 640;
  line-height: 1.25;
}

/* Hide the default "Powered by Obsidian Publish" badge (our .sw-footer stays). */
.site-footer { display: none !important; }

/* ---- 4. Footer (injected by publish.js as .sw-footer) ------------------ */
.sw-footer {
  margin-top: 66px;
  padding-top: 20px;
  border-top: 1px solid var(--sw-border);
  font-size: 12.5px;
  color: var(--sw-faint);
  line-height: 1.6;
}
.sw-footer .sw-scope {
  font-family: var(--font-monospace-theme);
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.sw-footer .sw-row {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  align-items: baseline; justify-content: space-between;
}
.sw-footer .sw-attr { color: var(--sw-muted); max-width: 56ch; }
.sw-footer .sw-links {
  display: flex; gap: 18px;
  font-family: var(--font-monospace-theme); font-size: 11px;
}
.sw-footer a { color: var(--sw-muted); text-decoration: none; border: 0; }
.sw-footer a:hover { color: var(--sw-accent-h); }

/* ---- 5. Motion: minimal, subtle hover only ----------------------------- */
.markdown-rendered a,
.sw-footer a,
.nav-file-title { transition: color 0.12s ease, background 0.12s ease; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}