/* ============================================================
   Zeroth Layer — Styles
   
   Flexoki color palette (MIT License, kepano/flexoki)
   Layout + sizing cloned from stephango.com
   ============================================================ */

/* ── Reset / Normalize (minimal, from stephango) ── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
img { border-style: none; max-width: 100%; }
b, strong { font-weight: 600; }
sub, sup { font-size: 85%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.35em; }

/* Text selection — exact stephango values */
::selection       { background: var(--color-selection); }
::-moz-selection  { background: var(--color-selection); }


/* ── Design Tokens ── */
:root {
  --font-content:  -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-ui:       var(--font-content);
  --font-mono:     ui-monospace, SFMono-Regular, "Cascadia Code", "IBM Plex Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace;

  --wrap-normal:   37em;
  --wrap-wide:     54em;
  --line-height:   1.5;
  --heading-weight: 500;
  --font-small:    0.875em;
  --font-smaller:  0.8em;
  --image-radius:  6px;
}

@media (max-width: 860px) {
  :root {
    --wrap-normal:    88vw;
    --wrap-wide:      100vw;
    --heading-weight: 600;
  }
}


/* ── Flexoki Palette ── */
:root {
  --flexoki-black:  #100F0F;
  --flexoki-paper:  #FFFCF0;
  --flexoki-50:     #F2F0E5;
  --flexoki-100:    #E6E4D9;
  --flexoki-150:    #DAD8CE;
  --flexoki-200:    #CECDC3;
  --flexoki-300:    #B7B5AC;
  --flexoki-400:    #9F9D96;
  --flexoki-500:    #878580;
  --flexoki-600:    #6F6E69;
  --flexoki-700:    #575653;
  --flexoki-800:    #403E3C;
  --flexoki-850:    #343331;
  --flexoki-900:    #282726;
  --flexoki-950:    #1C1B1A;
  --flexoki-cyan:   #3AA99F;
  --flexoki-action: #205EA6;
}


/* ── Light Theme ── */
:root {
  --color-bg-primary:   var(--flexoki-paper);
  --color-bg-secondary: var(--flexoki-50);
  --color-tx-normal:    var(--flexoki-black);
  --color-tx-muted:     var(--flexoki-600);
  --color-tx-faint:     var(--flexoki-300);
  --color-ui-normal:    var(--flexoki-100);
  --color-ui-hover:     var(--flexoki-150);
  --color-accent:       var(--flexoki-cyan);
  --color-action:       var(--flexoki-action);
  --color-selection:    rgba(187, 220, 206, 0.3);
}

/* ── Dark Theme ── */
html.theme-dark {
  --color-bg-primary:   var(--flexoki-black);
  --color-bg-secondary: var(--flexoki-950);
  --color-tx-normal:    var(--flexoki-200);
  --color-tx-muted:     var(--flexoki-500);
  --color-tx-faint:     var(--flexoki-700);
  --color-ui-normal:    var(--flexoki-900);
  --color-ui-hover:     var(--flexoki-850);
  --color-accent:       var(--flexoki-cyan);
  --color-action:       var(--flexoki-cyan);
  --color-selection:    rgba(30, 95, 91, 0.3);
}


/* ============================================================
   BASE TYPOGRAPHY — exact stephango sizing system

   He uses:
     html { font-size: 62.5% }        → 1rem = 10px
     body { font-size: 1.8rem }        → 18px body text
     body { font-size: calc(1.5rem + 0.25vw) }  → responsive

   We replicate the same computed sizes WITHOUT 62.5% hack,
   because our rem values elsewhere (nav padding etc.) would
   break. Instead we set body to 18px directly.
   ============================================================ */
html {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-family: var(--font-content);
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  color: var(--color-tx-normal);
  background-color: var(--color-bg-primary);
}

body {
  color-scheme: light dark;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--color-bg-primary);
  font-family: var(--font-content);
  color: var(--color-tx-normal);

  /* CRITICAL: stephango uses 18px body text, not 16px.
     His formula: calc(1.5rem + 0.25vw) with 62.5% html.
     That evaluates to: calc(15px + 0.25vw) ≈ 18px at 1200px.
     We replicate the same responsive scaling: */
  font-size: 18px;
  font-size: calc(15px + 0.25vw);

  line-height: var(--line-height);
  margin: 2vw auto 0 auto;         /* stephango: 2vw auto 0 auto */
  padding: 0 0 12rem;              /* big bottom padding for scroll */
  overflow-x: hidden;
}


/* ── Headings ──
   stephango h1 = 1.25em (NOT 2em — his is MUCH smaller than default)
   stephango h2 = default (no explicit size, inherits browser ~1.5em)
   stephango h2 margin-top = 2em
   ── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--heading-weight);
  line-height: 1.25;
  color: var(--color-tx-normal);
}

h1 { font-size: 1.25em; margin-top: 0; }
h2 { margin-top: 2em; }
h3 { margin-top: 1.5em; }

article h1 + h2,
article h2 + h3 { margin-top: 1em; }

p { margin-top: 0; margin-bottom: 1em; }

blockquote {
  margin: 1em 0;
  padding-left: 1em;
  border-left: 3px solid var(--color-ui-normal);
  color: var(--color-tx-muted);
}

ul, ol {
  padding-left: 1.5em;
}


/* ── Links ── */
a {
  color: var(--color-tx-normal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-tx-faint);
  font-weight: 400;
  transition: color 0.1s ease, text-decoration-color 0.1s ease;
}

a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

a.plain {
  text-decoration: none;
}

a.plain:hover {
  color: var(--color-accent);
}

/* Featured post: hover turns entire card cyan */
a.plain:hover h2 {
  color: var(--color-accent);
  transition: color 0.1s ease;
}


/* ── Code ── */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-bg-secondary);
  padding: 0.15em 0.3em;
  border-radius: 3px;
}

pre {
  background-color: var(--color-bg-secondary);
  padding: 1em;
  border-radius: 6px;
  overflow-x: auto;
  line-height: 1.45;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.875em;
}


/* ── Layout ──
   stephango: nav { margin: 0 auto 3em; width: var(--wrap-normal) }
   stephango: .wrap { max-width: var(--wrap-normal); margin-left: auto; margin-right: auto }
   ── */
nav {
  margin: 0 auto 3em;         /* 3em gap below nav — same as stephango */
  width: var(--wrap-normal);
  max-width: var(--wrap-wide);
  display: flex;
  align-items: center;
}

.wrap {
  max-width: var(--wrap-normal);
  margin-left: auto;
  margin-right: auto;
}


/* ── Flexbox Utilities ── */
.flex         { display: flex; }
.align-center { align-items: center; }
.flex-grow    { flex-grow: 1; min-width: 0; }
.flex-shrink  { flex-shrink: 0; }


/* ── Navigation ── */
nav a {
  font-weight: 400;
  font-size: 1em;
}

nav .flex-grow a {
  color: var(--color-tx-normal);
}

nav .nav-links {
  display: flex;
  align-items: center;
}

nav .nav-links a {
  color: var(--color-tx-muted);
  text-decoration: none;
  margin-left: 1.25em;
}

nav .nav-links a:hover {
  color: var(--color-accent);
}


/* ── Theme Toggle (exact stephango implementation) ── */
#theme-toggle {
  height: 20px;
  width: 36px;
  display: block;
  position: relative;
  border: none;
  cursor: pointer;
  margin-left: 1.25em;
  flex-shrink: 0;
}

#theme-toggle:hover .theme-toggle-switch {
  background-color: var(--color-action);
}

.theme-toggle-slide {
  height: 20px;
  border: 1px solid var(--color-ui-normal);
  border-radius: 24px;
  width: 100%;
  position: absolute;
  background: transparent;
  transition: border-color 0.3s ease;
}

.theme-toggle-switch {
  position: absolute;
  z-index: 9;
  top: 1px;
  left: 1px;
  right: auto;
  width: 18px;
  height: 18px;
  transition: left 0.1s linear, background-color 0.1s linear;
  background-color: var(--color-tx-muted);

  -webkit-mask-size: 18px;
  -webkit-mask-position: 50% 50%;
  mask-size: 18px;
  mask-position: 50% 50%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z' clip-rule='evenodd'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

html.theme-dark .theme-toggle-switch {
  left: 16px;
  background-color: var(--color-tx-normal);
  transition: left 0.1s linear, background-color 0.1s linear;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z'/%3E%3C/svg%3E");
}


/* ── Utility Classes ── */
.muted  { color: var(--color-tx-muted); }
.faint  { color: var(--color-tx-faint); }
.small  { font-size: var(--font-small); line-height: 1.4; }


/* ── Homepage ── */

/* Featured post h2 inside the Latest card — smaller than full h2 */
main > div > div > a.plain h2 {
  margin-top: 0.15em;
  margin-bottom: 0.1em;
}

.metadata {
  line-height: 1.5;
}

.pb { padding-bottom: 0.25em; }

hr {
  border: none;
  border-top: 1px solid var(--color-ui-normal);
  margin: 2em 0;
}

.line-height-loose { line-height: 1.8; }


/* ── Writing List ── */
.clean-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.clean-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  margin-bottom: 0.2em;
  line-height: 1.7;
}

.list-date {
  font-variant-numeric: tabular-nums;
  font-size: 1em;
  min-width: 5em;
  flex-shrink: 0;
}


/* ── Article / Page ── */
heading {
  display: block;
  margin-top: 0;
  margin-bottom: 2rem;
}

heading h1 {
  margin-top: 0;
  margin-bottom: 0.2em;
}

heading .metadata {
  margin-bottom: 0;
}

article {
  margin-top: 0;
}

article p,
article ul,
article ol {
  margin-bottom: 1.25em;
}

article li {
  margin-bottom: 0.25em;
}

article hr {
  margin-top: 3rem;
  margin-bottom: 1rem;
}


/* ── Footer ── */
footer {
  margin-top: 4em;
  margin-bottom: 3em;
}

.footer-links {
  font-size: var(--font-small);
  line-height: 2;
  margin: 0;
}

.footer-links a {
  color: var(--color-tx-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-accent);
}


/* ── Root Landing Page ── */
.root-content {
  margin-top: 0;
}

.root-tagline {
  font-size: 1.5em;
  font-weight: var(--heading-weight);
  line-height: 1.25;
  margin-bottom: 1.5em;
  color: var(--color-tx-normal);
}


/* ── Print ── */
@media print {
  nav, footer, #theme-toggle { display: none; }
  body { color: #000; background: #fff; }
  a { color: #000; }
  .wrap { max-width: 100%; }
}