/* ============================================================
   snapbook.ai brand system  ·  Direction B "Grid"
   ------------------------------------------------------------
   One stylesheet for every public marketing page.
   Loaded automatically by site.js. Do not link it per page.

   Contents
     1. Tokens (light default, dark toggle)
     2. Base + type scale
     3. Components  (.b-*)
     4. Legacy compatibility: remaps the old per-page
        --navy/--purple/--teal variables so pages that have
        not been rebuilt yet still render correctly.
     5. Decoration suppression: glows and gradient text.
   ============================================================ */

/* ── 1. TOKENS ─────────────────────────────────────────── */
:root {
  /* surfaces: warm white, not clinical */
  --bg:        #FBFBF9;
  --surface:   #FFFFFF;
  --surface-2: #F4F4F1;
  --surface-3: #EDEDE9;

  /* ink */
  --ink:   #0F1115;
  --ink-2: #545869;
  --ink-3: #64687A;

  /* one accent. that is the whole point. */
  --accent:       #4038B8;
  --accent-hover: #332CA0;
  --accent-soft:  #EFEEFA;
  --accent-ink:   #FFFFFF;

  /* semantic: status only, never decoration */
  --ok:    #1B6B51;
  --warn:  #8A5709;
  --stop:  #B4402F;

  /* Text on a deliberately dark panel (a band/callout that stays dark in BOTH
     themes). These never flip. Do not swap them for --ink/--hair. */
  --on-dark:    #FFFFFF;
  --on-dark-2:  rgba(255,255,255,0.76);
  --on-dark-3:  rgba(255,255,255,0.58);
  --on-dark-hi: rgba(255,255,255,0.88);

  /* rules + tints (used by the legacy sweep) */
  --hair:   rgba(15,17,21,0.09);
  --hair-2: rgba(15,17,21,0.16);
  --tint-1: rgba(15,17,21,0.022);
  --tint-2: rgba(15,17,21,0.045);

  /* type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, monospace;

  /* space scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --radius:   8px;
  --radius-s: 6px;
  --shadow:   0 1px 2px rgba(15,17,21,.05), 0 8px 24px -12px rgba(15,17,21,.12);
  --maxw:     1140px;
}

html[data-theme="dark"] {
  --bg:        #0A0A0C;
  --surface:   #101014;
  --surface-2: #16161B;
  --surface-3: #1D1D23;

  --ink:   #F0F0F2;
  --ink-2: #9A9BA6;
  --ink-3: #8A8B96;

  --accent:       #8B83F0;
  --accent-hover: #A29BF5;
  --accent-soft:  rgba(139,131,240,.13);
  --accent-ink:   #0A0A0C;

  --ok:   #4FBF97;
  --warn: #D9A03C;
  --stop: #E0725F;

  --hair:   rgba(255,255,255,0.10);
  --hair-2: rgba(255,255,255,0.18);
  --tint-1: rgba(255,255,255,0.028);
  --tint-2: rgba(255,255,255,0.055);

  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
}

/* ── 2. BASE + TYPE ────────────────────────────────────── */
html body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11','ss01';
}
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

.b-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.b-narrow { max-width: 780px; margin: 0 auto; padding: 0 28px; }

.b-display {
  font-size: clamp(38px, 5.6vw, 66px);
  font-weight: 700; line-height: 1.02; letter-spacing: -.038em;
  color: var(--ink); text-wrap: balance;
}
.b-h2 {
  font-size: clamp(27px, 3.4vw, 40px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.032em;
  color: var(--ink); text-wrap: balance;
}
.b-h3 {
  font-size: 19px; font-weight: 650; line-height: 1.3;
  letter-spacing: -.018em; color: var(--ink);
}
.b-lede { font-size: clamp(16px,1.6vw,19px); line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.b-body { font-size: 15.5px; line-height: 1.68; color: var(--ink-2); }
.b-small { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.b-num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.b-eyebrow {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}

/* ── 3. COMPONENTS ─────────────────────────────────────── */
.b-section { padding: clamp(56px, 8vw, 104px) 0; }
.b-section + .b-section { border-top: 1px solid var(--hair); }

.b-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 15px; font-weight: 600;
  padding: 12px 22px; border-radius: var(--radius-s);
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent); cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
  text-decoration: none; white-space: nowrap;
}
.b-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.b-btn-ghost { background: transparent; color: var(--ink); border-color: var(--hair-2); }
.b-btn-ghost:hover { background: var(--surface-2); border-color: var(--hair-2); }
.b-btn-lg { font-size: 16px; padding: 14px 28px; }

.b-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; color: var(--accent);
  text-decoration: none;
}
.b-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

.b-card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 28px 26px;
}
.b-card-hover { transition: border-color .16s ease; }
.b-card-hover:hover { border-color: var(--hair-2); }

/* hairline grid: cards separated by rules, not gaps */
.b-rulegrid {
  display: grid; gap: 1px; background: var(--hair);
  border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden;
}
.b-rulegrid > * { background: var(--surface); padding: 30px 28px; }
.b-g2 { grid-template-columns: repeat(2,1fr); }
.b-g3 { grid-template-columns: repeat(3,1fr); }
.b-g4 { grid-template-columns: repeat(4,1fr); }

.b-ico { width: 24px; height: 24px; color: var(--accent); display: block; }
.b-ico-lg { width: 30px; height: 30px; }

.b-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent);
}
.b-tag-ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }

/* proof strip: logos / claims under the hero */
.b-proof { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.b-proof-inner { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; padding: 20px 0; }
.b-proof-lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); flex-shrink: 0;
}
.b-proof-item { font-size: 14px; font-weight: 550; color: var(--ink-2); }

.b-stats { display: grid; grid-template-columns: repeat(4,1fr); }
.b-stat { padding: 26px 28px; }
.b-stat + .b-stat { border-left: 1px solid var(--hair); }
.b-stat b {
  display: block; font-family: var(--mono); font-size: 27px; font-weight: 500;
  color: var(--ink); letter-spacing: -.02em; margin-bottom: 6px;
}
.b-stat span { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }

@media (max-width: 900px) {
  .b-g3, .b-g4 { grid-template-columns: repeat(2,1fr); }
  .b-stats { grid-template-columns: repeat(2,1fr); }
  .b-stat:nth-child(3) { border-left: none; }
  .b-stat:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 620px) {
  .b-g2, .b-g3, .b-g4 { grid-template-columns: 1fr; }
  .b-stats { grid-template-columns: 1fr; }
  .b-stat + .b-stat { border-left: none; border-top: 1px solid var(--hair); }
  .b-wrap, .b-narrow { padding: 0 20px; }
  .b-rulegrid > * { padding: 24px 22px; }
}

/* ── 4. LEGACY COMPATIBILITY ───────────────────────────────
   Pages not yet rebuilt declare their own :root with the old
   dark palette. These selectors carry higher specificity
   (0,1,1) than :root (0,1,0), so they win regardless of
   load order. Delete a block once its pages are rebuilt.
   ────────────────────────────────────────────────────────── */
html[data-theme="light"], html:not([data-theme="dark"]) {
  --navy:   #FBFBF9;
  --navy-2: #FFFFFF;
  --navy-3: #F4F4F1;

  --text:       #0F1115;
  --text-muted: #545869;
  --text-dim:   #64687A;

  --purple:       #4038B8;
  --purple-light: #372FA6;
  --teal:         #1B6B51;
  --amber:        #8A5709;
  --red:          #B4402F;
  --green:        #1B6B51;

  --border:        rgba(15,17,21,0.09);
  --border-accent: rgba(64,56,184,0.22);
  --border-teal:   rgba(31,122,92,0.26);
}
html[data-theme="dark"] {
  --navy:   #0A0A0C;
  --navy-2: #101014;
  --navy-3: #16161B;

  --text:       #F0F0F2;
  --text-muted: #9A9BA6;
  --text-dim:   #8A8B96;

  --purple:       #8B83F0;
  --purple-light: #A29BF5;
  --teal:         #4FBF97;
  --amber:        #D9A03C;
  --red:          #E0725F;
  --green:        #4FBF97;

  --border:        rgba(255,255,255,0.10);
  --border-accent: rgba(139,131,240,0.30);
  --border-teal:   rgba(79,191,151,0.28);
}

/* ── 5. DECORATION SUPPRESSION ─────────────────────────────
   The "vibe coded" tells: radial glow blobs behind heroes,
   gradient-filled headlines, gradient bars on cards.
   Hierarchy comes from size and weight now.
   ────────────────────────────────────────────────────────── */
.hero-glow, .hero-glow2, .cta-glow, .ast-glow, .ast-glow2,
.glow, .glow2, .form-glow, .form-glow2, .about-glow,
.evolve-glow, .explore-glow, .faq-cta-glow, .pl-glow, .svc-glow {
  display: none !important;
}
.grad {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
}
.btn-grad, .btn-primary {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: none !important;
}
.btn-primary:hover { background: var(--accent-hover) !important; transform: none !important; }

/* the 2px gradient rule on top of every card */
.module-top-bar, .module-hero-top-bar, .os-mod::before, .mcard::before {
  background: var(--hair) !important;
}

/* pulsing badge dot: stop it moving */
.badge-dot { animation: none !important; }

/* legacy pill buttons were 28px radius; square them up */
.btn-lg, .btn-primary, .btn-ghost { border-radius: var(--radius-s) !important; }

/* keep emoji from rendering at icon size once replaced */
.module-icon:empty, .emo:empty { display: none; }

/* Icons dropped into slots that used to hold an emoji inherit the slot's
   font-size, so existing per-page sizing keeps working untouched. */
.ico-slot { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; }
.module-icon .ico-slot, .mod-icon .ico-slot, .feat-icon .ico-slot { display: block; }


/* ── 6. DARK BLOCKS INSIDE A LIGHT PAGE ─────────────────────
   Currently EMPTY by design, and that is the preferred state.

   If a component paints itself dark inside the light theme, its
   children still resolve the ink tokens DARK, i.e. dark text on a dark
   block, contrast ~1:1. Two ways to fix it, in order of preference:

   1. Make the block light. A "featured" card in a light design reads
      better as `background: var(--surface); border: 2px solid
      var(--accent)` than as a solid accent slab. This is what
      .module-plan.featured (pricing) and .price-card.featured
      (chatbot) now do, which is why nothing is listed here.

   2. If the block MUST stay dark (index.html's Pro 365 .band), style
      it with the --on-dark* tokens in section 1. Those never flip
      with the theme.

   If you ever do need to flip a whole subtree, put the token
   overrides on the DESCENDANTS (`.block > *`), never on the block:
   the block paints itself with var(--accent), so redefining --accent
   on it turns its own background white too. And never do it to a
   wrapper that only fakes a border (pro365's .saving-card is
   `padding:2px; background:var(--accent)` around an inner card):
   its children sit on the INNER background.
   ────────────────────────────────────────────────────────── */

/* ── 7. THEME-INVERTED ISLANDS ──────────────────────────────
   Two mirror-image problems, one cause: a component pins its own
   surface colour while its children read the theme tokens.
   ────────────────────────────────────────────────────────── */

/* (a) In DARK, --accent is a LIGHT indigo: good as text on a near
   black page, but a filled button with a white label lands at 3.2:1.
   Filled brand buttons therefore get a DEEPER indigo in dark, which
   takes a white label at ~7:1. Only list controls that are genuinely
   accent-filled; a tinted or outline variant must not be caught. */
html[data-theme="dark"] { --accent-solid: #4F46C4; }
html[data-theme="dark"] .btn-grad,
html[data-theme="dark"] .fb-cta,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-cta,
html[data-theme="dark"] .stack-cta-btn,
html[data-theme="dark"] .form-submit,
html[data-theme="dark"] .sn-cta,
html[data-theme="dark"] .plan-cta,
html[data-theme="dark"] .pricing-cta.primary,
html[data-theme="dark"] .pricing-badge,
html[data-theme="dark"] .price-card.featured .price-cta,
html[data-theme="dark"] .cta-grad,
html[data-theme="dark"] .btn-teal,
html[data-theme="dark"] .btn.btn-grad,
/* a few legacy CTAs are inline-styled with no class, so match the
   declaration itself rather than inventing a class for each */
html[data-theme="dark"] [style*="background:var(--accent)"],
html[data-theme="dark"] [style*="background: var(--accent)"] {
  background: var(--accent-solid) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* (b) The product mockups draw a WHITE phone screen. Their contents
   must stay on the light palette in BOTH themes, or dark theme paints
   light text onto a white screen. Pinned, never flipped.
   .phone-frame is snapshop.html; .phone .screen is hr.html. */
.phone-frame, .phone-frame *,
.phone .screen, .phone .screen *,
.msg, .msg * {
  --text:         #0F1115;
  --text-muted:   #545869;
  --text-dim:     #64687A;
  --ink:          #0F1115;
  --ink-2:        #545869;
  --ink-3:        #64687A;
  --purple:       #4038B8;
  --purple-light: #372FA6;
  --accent:       #4038B8;
  --teal:         #1B6B51;
  --green:        #1B6B51;
  --amber:        #8A5709;
  --red:          #B4402F;
  --navy:         #FBFBF9;
  --navy-2:       #FFFFFF;
  --navy-3:       #F4F4F1;
  --surface:      #FFFFFF;
  --border:       rgba(15,17,21,0.09);
  --hair:         rgba(15,17,21,0.09);
  --tint-1:       rgba(15,17,21,0.022);
  --tint-2:       rgba(15,17,21,0.045);
}