/* =========================================================================
   colors_and_type.css — VeraOps design tokens, base reset & typography
   Mirrors the inline design system used by the root index.html
   (paper-and-ink). Loaded by the /articles pages.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* === Design System tokens (paper-and-ink) === */
  --paper:        #F3F8EA;
  --paper-2:      #EAF0DC;
  --surface:      #FFFFFF;
  --surface-ink:  #F8FBF1;
  --ink:          #000000;
  --ink-2:        #2B2B2B;
  --ink-3:        #6B6B6B;
  --ink-4:        #A8A8A8;
  --hairline:     #DCE3CD;
  --hairline-2:   #C5CFB1;
  --spark:        #E5A83D;
  --spark-deep:   #B7811F;
  --spark-soft:   #F4D89A;
  --spark-paper:  #FBF1D8;

  /* Type families */
  --font-display: 'Newsreader', 'Source Serif 4', Georgia, serif;
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --max-w: 1200px;
  --pad-v: 120px;
  --pad-h: 32px;
  --radius: 10px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Curtain used by the sessionStorage page-transition guard. Kept neutral so
   content is never hidden if motion.js fails to clear it. */
.vera-curtain body { opacity: 1; }

/* === Shared typography helpers === */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 18px;
}