/* Sand Mono theme layer for the public site. See docs/DESIGN.md.
   Loaded last on every public page so it refines each page's own styles. */

:root {
  --sand: #E8D6B0;
  --sand-soft: rgba(232, 214, 176, 0.10);
  --ink-on-light: #121214;
}

::selection { background: rgba(232, 214, 176, 0.35); color: #fff; }

body { -webkit-font-smoothing: antialiased; }

h1 { letter-spacing: -0.035em; }
h2 { letter-spacing: -0.025em; }

/* Logo mark: sand tile with an ink glyph, same on every page */
.logo-mark {
  background: var(--sand) !important;
  color: #0F1012 !important;
  border-radius: 8px;
}

/* Primary actions: off-white, tactile, dark label */
.btn-nav,
.btn-primary {
  background: #F4F4F2;
  color: #0F1012 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.btn-nav { border-radius: 999px; }
.btn-primary { border-radius: 12px; }
.btn-nav:hover,
.btn-primary:hover { background: #FFFFFF; }

/* Key words in headings use the single highlight */
h1 .accent, h1 em, .hero h1 span.accent { color: var(--sand); }

/* Links inside long-form content */
.article-body a,
.prose a { color: var(--sand); text-decoration-color: rgba(232, 214, 176, 0.45); }

/* Focus is always visible */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 2px;
}