/* ============================================================
   rraushan.blog — shared stylesheet (tokens + global vocabulary)
   This is the common subset every ML note links to. Replace with
   the full site stylesheet if preferred — same class vocabulary.
   ============================================================ */
:root {
  /* ---- surfaces & ink ---- */
  --bg:            #f7f5f0;
  --surface:       #fffefb;
  --surface2:      #f0ede6;
  --bg-elevated:   #fffefb;
  --bg-subtle:     #f0ede6;
  --bg-code:       #f0ede6;
  --bg2:           #fffefb;
  --bg3:           #f0ede6;
  --principle-bg:  #faf8f5;
  --ink:           #1a1816;
  --ink2:          #4a4540;
  --ink3:          #8a8278;
  --text:          #1a1816;
  --text2:         #4a4540;
  --text3:         #8a8278;
  --text-muted:    #6a6560;
  --text-faint:    #b0aaa0;
  /* ---- accents (muted, professional) ---- */
  --accent:        #c84b2f;
  --accent2:       #2a5f8f;
  --accent3:       #2a7a4f;
  --accent4:       #8a6a3e;
  --amber:         #8a6a3e;
  --teal:          #357a6e;
  --rose:          #a8554a;
  --blue:          #2a5f8f;
  --cold:          #a8554a;
  --derive:        #357a6e;
  --revision:      #2a5f8f;
  --interview:     #8a6a3e;
  --purple:        #7c5cbf;
  --warn:          #c84b2f;
  /* tints */
  --accent-bg:     rgba(200,75,47,0.07);
  --accent-bd:     rgba(200,75,47,0.20);
  --accent-soft:   rgba(200,75,47,0.10);
  --accent-glow:   rgba(200,75,47,0.05);
  --accent2-bg:    rgba(42,95,143,0.07);
  --accent2-bd:    rgba(42,95,143,0.20);
  --accent3-bg:    rgba(42,122,79,0.07);
  --accent3-bd:    rgba(42,122,79,0.20);
  --teal-soft:     rgba(53,122,110,0.10);
  --rose-soft:     rgba(168,85,74,0.10);
  --blue-soft:     rgba(42,95,143,0.10);
  /* ---- borders ---- */
  --border:        rgba(26,24,22,0.10);
  --border2:       rgba(26,24,22,0.06);
  --border-soft:   rgba(26,24,22,0.06);
  --border-solid:  #e5e3de;
  /* ---- code ---- */
  --code-bg:       #f0ede6;
  --dark-code:     #1e1c1a;
  --dark-code-fg:  #d4cfc8;
  --dark-border:   rgba(255,255,255,0.08);
  --dark-header:   rgba(255,255,255,0.04);
  /* ---- highlights / misc ---- */
  --yellow:        #f5e6a3;
  --yellow-ink:    #7a5c00;
  --mental-bg:     #f0edf8;
  --mental-border: #7c5cbf;
  --mental-ink:    #3a2060;
  --nav-muted:     rgba(247,245,240,0.60);
  --mac-yellow:    #c8a44a;
  --shadow:        0 2px 10px rgba(26,24,22,0.07);
  /* ---- type & metrics ---- */
  --font-sans:     'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif:    'Instrument Serif', Georgia, serif;
  --font-mono:     'DM Mono', 'Fira Code', monospace;
  --radius:        8px;
  --radius-lg:     14px;
  --content-w:     720px;
  --wide-w:        900px;
}

/* ============================================================
   NOTE LAYOUT (shared by every ML note; scope class .note)
   Mirrors the per-note vocabulary used across the site.
   ============================================================ */
.note * { box-sizing: border-box; margin: 0; padding: 0; }
.note {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  font-size: 15px;
  font-weight: 300;
}
.note .page { max-width: 780px; margin: 0 auto; padding: 56px 32px 96px; }
.note .doc-title {
  font-family: 'Instrument Serif', serif;
  font-size: 42px; font-weight: 400; letter-spacing: -0.5px;
  color: var(--ink); margin-bottom: 6px;
}
.note .doc-subtitle {
  font-size: 14px; color: var(--ink3); letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 48px;
}
.note .chapter-pill {
  display: inline-block; background: var(--code-bg); color: var(--ink3);
  font-size: 11px; font-weight: 600; font-family: 'DM Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 14px;
}
.note .section { margin-bottom: 56px; }
.note .section-title {
  font-family: 'Instrument Serif', serif;
  font-size: 26px; font-weight: 400; color: var(--ink);
  margin-bottom: 20px; padding-bottom: 10px;
  border-bottom: 1.5px solid var(--border);
}
.note .section-title .tag {
  font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 400;
  color: var(--ink3); letter-spacing: 0.08em; text-transform: uppercase;
  display: block; margin-bottom: 4px;
}
.note .sub-title {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 19px; font-weight: 400; color: var(--ink);
  margin: 28px 0 12px;
}
.note p { margin-bottom: 14px; color: var(--ink2); }
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink); font-weight: 500; }
.note em { font-style: italic; }
.note a { color: var(--accent2); text-decoration: none; border-bottom: 1px dotted var(--accent2); }
.note a:hover { border-bottom-style: solid; }
.note hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; }
.note ul, .note ol { margin: 8px 0 14px 0; padding-left: 22px; color: var(--ink2); }
.note ul li, .note ol li { margin-bottom: 6px; }

/* callouts */
.note .callout {
  background: var(--surface); border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0; padding: 14px 18px; margin: 20px 0;
  font-size: 14px; color: var(--ink2);
}
.note .callout strong { color: var(--ink); font-weight: 500; }
.note .callout-blue { border-left-color: var(--accent2); }
.note .callout-green { border-left-color: var(--accent3); }
.note .callout-purple { border-left-color: var(--mental-border); }

/* mental model box */
.note .mental-model {
  background: var(--mental-bg);
  border: 1px solid rgba(124,92,191,0.25);
  border-left: 3px solid var(--mental-border);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px; margin: 24px 0;
}
.note .mental-model .mm-title {
  font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mental-border); margin-bottom: 10px;
}
.note .mental-model p { color: var(--mental-ink); font-size: 14px; }
.note .mental-model ul { list-style: none; padding: 0; margin: 0; }
.note .mental-model ul li {
  position: relative; padding-left: 20px; font-size: 14px;
  color: var(--mental-ink); margin-bottom: 7px; line-height: 1.6;
}
.note .mental-model ul li::before {
  content: '◆'; position: absolute; left: 0; top: 1px;
  font-size: 8px; color: var(--mental-border);
}
.note .mental-model ul li:last-child { margin-bottom: 0; }

/* code */
.note code {
  font-family: 'DM Mono', monospace; font-size: 13px;
  background: var(--code-bg); padding: 1px 5px; border-radius: 3px;
  color: var(--accent);
}
.note pre {
  font-family: 'DM Mono', monospace; font-size: 13px;
  background: var(--dark-code); color: var(--dark-code-fg);
  border-radius: 8px; padding: 20px 22px; line-height: 1.65;
  overflow-x: auto; margin: 16px 0;
}
.note pre code { background: transparent; padding: 0; color: inherit; }
.note pre .kw { color: #c084fc; }
.note pre .fn { color: #60d4a8; }
.note pre .st { color: #f5c068; }
.note pre .cm { color: #6a6560; font-style: italic; }
.note pre .num { color: #7ec8e3; }
.note pre .cl { color: #fbbf24; }

/* equation block */
.note .eq {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 20px 22px; margin: 18px 0;
  font-family: 'DM Mono', monospace; font-size: 14.5px;
  text-align: center; color: var(--ink); overflow-x: auto;
}
.note .eq .t-bias { color: var(--accent2); font-weight: 500; }
.note .eq .t-var { color: var(--accent); font-weight: 500; }
.note .eq .t-noise { color: var(--ink3); font-weight: 500; }
.note .eq .t-green { color: var(--accent3); font-weight: 500; }
.note .eq .t-purple { color: var(--mental-border); font-weight: 500; }
.note .eq-labels {
  display: flex; justify-content: center; gap: 26px; margin-top: 10px;
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.note .eq-labels .l-bias { color: var(--accent2); }
.note .eq-labels .l-var { color: var(--accent); }
.note .eq-labels .l-noise { color: var(--ink3); }

/* tables */
.note .data-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.note .data-table th {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink3); font-weight: 400;
  text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--border);
}
.note .data-table td { padding: 10px 14px; border-bottom: 1px solid var(--border2); color: var(--ink2); }
.note .data-table tr:last-child td { border-bottom: none; }
.note .good { color: var(--accent3); font-weight: 500; }
.note .bad { color: var(--accent); font-weight: 500; }

/* contrast cards */
.note .contrast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.note .contrast-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px; font-size: 13.5px; color: var(--ink2);
}
.note .contrast-card .cc-title {
  font-family: 'DM Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.note .contrast-card.good .cc-title { color: var(--accent3); }
.note .contrast-card.bad .cc-title { color: var(--accent); }
.note .contrast-card.blue .cc-title { color: var(--accent2); }
.note .contrast-card.amber .cc-title { color: var(--amber); }

/* numbered steps */
.note .steps { counter-reset: step; list-style: none; margin: 14px 0; padding: 0; }
.note .steps li {
  counter-increment: step; position: relative;
  padding-left: 32px; margin-bottom: 10px; font-size: 14px; color: var(--ink2);
}
.note .steps li::before {
  content: counter(step); position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; background: var(--ink); color: var(--bg);
  border-radius: 50%; font-family: 'DM Mono', monospace; font-size: 11px;
  display: flex; align-items: center; justify-content: center; font-weight: 500;
}

/* figures */
.note svg.fig { display: block; width: 100%; margin: 20px 0; }
.note .fig-caption { font-size: 12px; color: var(--ink3); text-align: center; margin-top: -8px; margin-bottom: 20px; }

/* nav */
.note .toc-nav {
  display: flex; justify-content: space-between; margin-top: 48px;
  padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px;
}
.note .toc-nav a { color: var(--ink3); border-bottom: none; }
.note .toc-nav a:hover { color: var(--accent2); }

@media (max-width: 560px) {
  .note .contrast-grid { grid-template-columns: 1fr; }
  .note .page { padding: 32px 20px 64px; }
  .note .doc-title { font-size: 32px; }
}