/* /blog.css — minimal styles for the static-rendered blog pages.
   Loaded as a separate file because the prerendered HTML doesn't run the
   Vite CSS pipeline; it gets static <link rel="stylesheet"> tags instead. */

:root {
  --frame-w: 375px;
  --frame-pad: 20px;
  --accent: #c9a961;
  --accent-dark: #b08f4a;
  --gold: #c9a961;
  --gold-soft: #e6d2a3;
  --gold-deep: #b08f4a;
  --ink-900: #0a0a0f;
  --ink-700: #1c1c28;
  --ink-500: #5a5a72;
  --ink-300: #8a8aa3;
  --ink-100: #dcdce8;
  --surface-0: #ffffff;
  --surface-700: #1c1c28;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: #0a0a0f;
  color: #fafafa;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.frame {
  width: var(--frame-w);
  max-width: var(--frame-w);
  min-width: var(--frame-w);
  margin: 0 auto;
  background: #0a0a0f;
  position: relative;
  overflow-x: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  min-height: 100vh;
}

::selection { background: rgba(201, 169, 97, 0.3); color: #fafafa; }

/* Tailwind utility replacements (used in the rendered HTML). */
.font-display { font-family: 'Fraunces', Georgia, serif; }
.font-sans { font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Color tokens (mirror tailwind.config.js). */
.bg-surface-0 { background-color: #ffffff; }
.bg-ink-900 { background-color: #0a0a0f; }
.bg-ink-950 { background-color: #050508; }
.bg-accent-500 { background-color: #c9a961; }
.text-ink-100 { color: #dcdce8; }
.text-ink-300 { color: #8a8aa3; }
.text-ink-400 { color: #5a5a72; }
.text-ink-500 { color: #3a3a4d; }
.text-ink-600 { color: #2a2a3a; }
.text-ink-700 { color: #1c1c28; }
.text-ink-900 { color: #0a0a0f; }
.text-accent-500 { color: #c9a961; }
.text-accent-700 { color: #b08f4a; }
.text-surface-0 { color: #ffffff; }
.bg-surface-700 { background-color: #1c1c28; }
.text-ink-500\/40 { color: rgba(90, 90, 114, 0.4); }
.border-ink-900\/\[0\.04\] { border-color: rgba(255, 255, 255, 0.04); }
.border-ink-900\/\[0\.06\] { border-color: rgba(255, 255, 255, 0.06); }
.border-ink-900\/\[0\.08\] { border-color: rgba(255, 255, 255, 0.08); }
.border-ink-900\/\[0\.10\] { border-color: rgba(255, 255, 255, 0.10); }
.border-accent-500\/40 { border-color: rgba(201, 169, 97, 0.4); }
.border-accent-500\/30 { border-color: rgba(201, 169, 97, 0.3); }

/* Layout utilities used by the rendered HTML. */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }