/* Notabium - brand tokens + primitives
 * Source: Claude Design brand book (Notabium v2.0, LIGHT edition 06.2026)
 * Use on: marketing site, share-link pages, anywhere brand surfaces.
 * Sharp corners. No decorative gradients. Single ember accent (<= 1 per view).
 *
 * LIGHT/WHITE theme. Background paper, white cards, ink text, ember accent.
 * The legacy --nb-night* tokens are intentionally remapped to LIGHT values so
 * every page that still references them renders light. New work should prefer
 * the semantic tokens (--nb-paper, --nb-surface, --nb-ink, --nb-ink-muted).
 */

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

/* Notabium v2 "Modern recorder" brand (Brand Book v2 / notabium2). Warm
 * neutrals, ember accent, rounded geometry, pill buttons. Geist display + body,
 * Newsreader italic for the human voice, Geist Mono labels. The wordmark is
 * lowercase Geist SemiBold with an ember recording-dot on the i.
 * (Token NAMES kept stable so all pages re-skin at once.) */
:root {
  /* PAPER (page surface) — warm whites */
  --nb-paper: #FBFAF8;
  --nb-card: #FFFFFF;
  --nb-surface: #F3F1EC;
  --nb-surface-deep: #EAE7E0;
  --nb-divider: #E4E1D9;
  --nb-rule: rgba(26, 25, 21, 0.08);
  --nb-line: rgba(26, 25, 21, 0.08);

  /* INK — warm near-black (muted nudged darker than the book for readability) */
  --nb-ink: #1A1915;
  --nb-ink-soft: #3B3933;
  --nb-ink-muted: #56544C;
  --nb-ink-dim: #807B70;

  /* EMBER — the single accent (the recording light). */
  --nb-accent: #FF5C1A;
  --nb-accent-hi: #FF6E33;
  --nb-accent-deep: #E84D0E;
  --nb-accent-soft: rgba(255, 92, 26, 0.10);
  --nb-accent-wash: rgba(255, 92, 26, 0.06);
  --nb-accent-line: rgba(255, 92, 26, 0.40);

  /* GHOST - the giant footer wordmark on warm paper */
  --nb-ghost: #F0EEE8;

  /* NIGHT — warm black, used by dark sections (and the future dark landing). */
  --nb-night: #0D0C0B;
  --nb-night-surface: #171511;
  --nb-night-surface-hi: #211F1A;
  --nb-night-line: rgba(255, 255, 255, 0.09);
  --nb-night-text: #FBFAF8;
  --nb-night-muted: #8F8A7E;

  /* SIGNAL */
  --nb-good: #2FA875;
  --nb-bad: #DE4A4A;

  /* TYPE — Geist everywhere, Newsreader italic for emphasis, Geist Mono labels */
  --nb-font-display: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --nb-font-sans: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --nb-font-serif: "Newsreader", Georgia, serif;
  --nb-font-mono: "Geist Mono", ui-monospace, monospace;

  /* RADII — rounded, consumer-grade */
  --nb-radius-sm: 8px;
  --nb-radius-md: 14px;
  --nb-radius-lg: 22px;
  --nb-radius-pill: 999px;

  /* SPACING (4px base) */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* LAYOUT */
  --nb-max: 1280px;
  --nb-gutter: 88px;
}

@media (max-width: 980px) {
  :root { --nb-gutter: 24px; }
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--nb-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }

/* Wordmark - lowercase "notabium" in Geist SemiBold with the ember recording
 * dot as the tittle on the i. The dot is the only color in the mark. */
.nb-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--nb-font-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.nb-wordmark .nb-name { color: currentColor; }
.nb-wordmark .nb-i { position: relative; display: inline-block; }
.nb-wordmark .nb-i::after {
  content: '';
  position: absolute;
  top: 0.085em;
  left: 50%;
  transform: translateX(-50%);
  width: 0.165em;
  height: 0.165em;
  border-radius: 50%;
  background: var(--nb-accent);
}
/* Monogram mark - four rounded bars, the silhouette of speech (app/notetaker
 * icon, sim avatar). 40/82/58/26% of cap height; the rhythm never changes. */
.nb-glyph { display: inline-flex; align-items: center; gap: 0.085em; height: 1em; flex: 0 0 auto; }
.nb-glyph i { display: block; width: 0.135em; background: var(--nb-accent); border-radius: 999px; }
.nb-glyph i:nth-child(1) { height: 0.40em; }
.nb-glyph i:nth-child(2) { height: 0.82em; }
.nb-glyph i:nth-child(3) { height: 0.58em; }
.nb-glyph i:nth-child(4) { height: 0.26em; }
.nb-wordmark .nb-bracket, .nb-wordmark .nb-caret { display: none; }

/* Monogram - >N with accent caret + dot */
.nb-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nb-ink);
  color: var(--nb-paper);
  font-family: var(--nb-font-mono);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
  position: relative;
  flex: 0 0 auto;
}
.nb-monogram .nb-caret { color: var(--nb-accent); }
.nb-monogram .nb-dot {
  position: absolute;
  bottom: 18%;
  right: 20%;
  width: 10%;
  height: 4.5%;
  background: var(--nb-accent);
}

/* Code label (terminal cursor marker) */
.nb-label {
  font-family: var(--nb-font-mono);
  font-size: 11px;
  letter-spacing: -0.005em;
  color: var(--nb-ink-muted);
}
.nb-label--accent { color: var(--nb-accent); }
.nb-label--muted-night { color: var(--nb-ink-muted); }

/* Buttons - pill, Instrument Sans, white-on-clover for the primary. */
.nb-btn {
  font-family: var(--nb-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 12px 22px;
  border-radius: var(--nb-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity .15s, background .15s, color .15s, border-color .15s, transform .15s;
}
.nb-btn:hover { opacity: 0.92; }
.nb-btn--ember { background: var(--nb-accent); color: #FFFFFF; }
.nb-btn--ember:hover { background: var(--nb-accent-hi); opacity: 1; }
/* "ghost-night" is the legacy name for the secondary outline button - now light */
.nb-btn--ghost-night {
  background: transparent;
  color: var(--nb-ink);
  border: 1px solid var(--nb-ink-dim);
  padding: 10px 18px;
}
.nb-btn--ghost-night:hover { background: var(--nb-surface); opacity: 1; border-color: var(--nb-ink-dim); }
.nb-btn--ink { background: var(--nb-ink); color: var(--nb-paper); }
.nb-btn--ink:hover { background: var(--nb-ink-soft); opacity: 1; }
.nb-btn--ghost-paper {
  background: var(--nb-card);
  color: var(--nb-ink);
  border: 1px solid var(--nb-ink-dim);
  padding: 10px 18px;
}
.nb-btn--ghost-paper:hover { background: var(--nb-surface); opacity: 1; }
.nb-btn--link { background: transparent; color: var(--nb-ink-muted); padding: 11px 8px; }
.nb-btn--link:hover { color: var(--nb-ink); opacity: 1; }

/* Rebrand: display headlines everywhere (Bricolage Grotesque), overriding the
 * legacy inline mono on h1/h2/h3. Slightly looser tracking than the old mono. */
h1, h2, h3, .section-head h2, .hero h1 {
  font-family: var(--nb-font-display) !important;
}
h1, .hero h1, .section-head h2 { letter-spacing: -0.03em; }

/* Newsreader emphasis - "the human voice" word. One per view, in ember.
 * Used by the hero and per-page headlines (<em class="nb-em">word</em>). */
.nb-em {
  font-family: var(--nb-font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--nb-accent);
  letter-spacing: 0;
}

/* Recording-dot pulse */
@keyframes nb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
.nb-pulse { animation: nb-pulse 1.5s infinite; }

/* Container */
.nb-wrap { max-width: var(--nb-max); margin: 0 auto; padding: 0 var(--nb-gutter); }

/* ----------------------------------------------------------------------
 * Shared marketing primitives (used by index + future-generated pages)
 * Sharp corners only. One ember accent. Restrained motion.
 * -------------------------------------------------------------------- */

/* Scroll-reveal: a quiet fade + 12px rise. Honors reduced-motion.
 * Gated behind .js-reveal (added by an early inline script) so that if JS does
 * not run, content stays fully visible instead of stuck invisible. */
.js-reveal .nb-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.nb-reveal.is-in { opacity: 1; transform: none; }

/* Hover-lift for cards */
.nb-lift { transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.nb-lift:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .nb-reveal { opacity: 1; transform: none; transition: none; }
  .nb-lift { transition: none; }
  .nb-lift:hover { transform: none; }
  .nb-pulse { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* Mono kicker / eyebrow (// label) */
.nb-kicker {
  font-family: var(--nb-font-mono);
  font-size: 12px;
  letter-spacing: -0.005em;
  color: var(--nb-accent);
}
.nb-kicker--muted { color: var(--nb-ink-muted); }

/* ----------------------------------------------------------------------
 * LIGHT product-preview primitives (shared with the web app surface).
 * .nb-stage frames white mockup cards on a soft surface panel.
 * -------------------------------------------------------------------- */
.nb-stage {
  position: relative;
  background: var(--nb-surface);
  border: 1px solid var(--nb-divider);
  border-radius: var(--nb-radius-lg);
  overflow: hidden;
}
.nb-dotgrid-lite {
  background-image: radial-gradient(var(--nb-rule) 1px, transparent 1px);
  background-size: 22px 22px;
}
/* The single permitted "gradient": a faint ember wash for depth. */
.nb-ember-wash {
  background:
    radial-gradient(120% 80% at 85% 0%, var(--nb-accent-wash), transparent 60%);
}

/* Shared, reduced-motion-safe micro-motion */
@keyframes nb-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes nb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes nb-caret-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.nb-float { animation: nb-float 4s ease-in-out infinite; }
.nb-caret { display: inline-block; width: 0.55ch; background: var(--nb-accent); }
@media (prefers-reduced-motion: reduce) {
  .nb-float, .nb-caret { animation: none; }
}