/* ══════════════════════════════════════════════════════════════════
   Skimmilk landing — shared CSS for index.html + pricing.html
   Locked 2026-05-16 PM after pricing.html drifted with its own
   token set + nav layout.
   ══════════════════════════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────────────────────────────
   Source of truth: SkimMilk/design.md + CLAUDE.md. Light + dark are
   both first-class; .force-light / .force-dark override the system
   preference via the theme-toggle script (see THEME OVERRIDE below).
*/
:root {
  --sm-base:        #F2F3F5;
  --sm-surface:     #fafafa;
  --sm-raised:      #ffffff;
  --sm-edge:        rgba(0,0,0,0.08);
  --sm-outline:     #e0e6ed;
  --sm-fg:          #0d0e10;
  --sm-strong:      #000000;
  --sm-muted:       #4f5052;
  --sm-subtle:      #818283;
  --sm-ghost:       #c5c6c8;
  --sm-accent:      #5589C5;
  --sm-accent-ink:  #1E3B5F;
  --sm-ink:         #0d0e10;
  --sm-decision:    #4f46e5;
  --sm-action:      #b45309;
  --sm-risk:        #dc2626;
  --sm-mention:     #c2410c;
  --sm-meta:        #595959;
  --sm-consensus:   #16a34a;
  --sm-link:        #1E3B5F;
  --sm-live-dot:    #22c55e;
  --shadow-gloss:   0 1px 2px rgba(13,14,16,0.04), 0 4px 12px rgba(13,14,16,0.06);
  /* Category surfaces — locked 2026-05-17 PM. Warm yellow reserved for
     user-marked SAVED; AI-surfaced trays use cool tints. Mirrors the
     extension's --color-sm-*-surface tokens so the landing showcase
     can render the actual Notes-tab tray look pixel-for-pixel. */
  --sm-saved-surface:     #F3EFC2;
  --sm-saved-ink:         #7C4A03;
  --sm-decision-surface:  #eef2ff;
  --sm-action-surface:    #fffbeb;
  --sm-risk-surface:      #fef2f2;
  --sm-mention-surface:   #fff7ed;
  --sm-meta-surface:      #D2ECE4;
  --sm-consensus-surface: #f0fdf4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sm-base:       #0d0e10;
    --sm-surface:    #191818;
    --sm-raised:     #282728;
    --sm-edge:       rgba(255,255,255,0.07);
    --sm-outline:    #383537;
    --sm-fg:         #f8fafa;
    --sm-strong:     #ffffff;
    --sm-muted:      #c5c6c8;
    --sm-subtle:     #818283;
    --sm-ghost:      #4f5052;
    --sm-accent:     #5589C5;
    --sm-accent-ink: #5589C5;
    --sm-ink:        #0d0e10;
    --sm-decision:   #818cf8;
    --sm-action:     #fbbf24;
    --sm-risk:       #f87171;
    --sm-mention:    #fb923c;
    --sm-meta:       #818283;
    --sm-consensus:  #4ade80;
    --sm-link:       #7D96BC;
    --sm-live-dot:   #4ade80;
    --shadow-gloss:  0 1px 2px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35);
    --sm-saved-surface:     #F3EFC220;
    --sm-saved-ink:         #FCE36B;
    --sm-decision-surface:  #A5B4FC12;
    --sm-action-surface:    #FCD34D12;
    --sm-risk-surface:      #FCA5A512;
    --sm-mention-surface:   #FB923C12;
    --sm-meta-surface:      #D2ECE418;
    --sm-consensus-surface: #4ADE8012;
  }
}

html.force-light {
  --sm-base:#F2F3F5; --sm-surface:#fafafa; --sm-raised:#ffffff;
  --sm-edge:rgba(0,0,0,0.08); --sm-outline:#e0e6ed;
  --sm-fg:#0d0e10; --sm-strong:#000; --sm-muted:#4f5052; --sm-subtle:#818283; --sm-ghost:#c5c6c8;
  --sm-accent:#5589C5; --sm-accent-ink:#1E3B5F; --sm-ink:#0d0e10;
  --sm-decision:#4f46e5; --sm-action:#b45309; --sm-risk:#dc2626; --sm-mention:#c2410c; --sm-meta:#595959; --sm-consensus:#16a34a;
  --sm-link:#1E3B5F; --sm-live-dot:#22c55e;
  --shadow-gloss: 0 1px 2px rgba(13,14,16,0.04), 0 4px 12px rgba(13,14,16,0.06);
  --sm-saved-surface:#F3EFC2; --sm-saved-ink:#7C4A03;
  --sm-decision-surface:#eef2ff; --sm-action-surface:#fffbeb;
  --sm-risk-surface:#fef2f2; --sm-mention-surface:#fff7ed;
  --sm-meta-surface:#D2ECE4; --sm-consensus-surface:#f0fdf4;
}
html.force-dark {
  --sm-base:#0d0e10; --sm-surface:#191818; --sm-raised:#282728;
  --sm-edge:rgba(255,255,255,0.07); --sm-outline:#383537;
  --sm-fg:#f8fafa; --sm-strong:#fff; --sm-muted:#c5c6c8; --sm-subtle:#818283; --sm-ghost:#4f5052;
  --sm-accent:#5589C5; --sm-accent-ink:#5589C5; --sm-ink:#0d0e10;
  --sm-decision:#818cf8; --sm-action:#fbbf24; --sm-risk:#f87171; --sm-mention:#fb923c; --sm-meta:#818283; --sm-consensus:#4ade80;
  --sm-link:#7D96BC; --sm-live-dot:#4ade80;
  --shadow-gloss: 0 1px 2px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35);
  --sm-saved-surface:#F3EFC220; --sm-saved-ink:#FCE36B;
  --sm-decision-surface:#A5B4FC12; --sm-action-surface:#FCD34D12;
  --sm-risk-surface:#FCA5A512; --sm-mention-surface:#FB923C12;
  --sm-meta-surface:#D2ECE418; --sm-consensus-surface:#4ADE8012;
}

/* ── RESET + BODY BASELINE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--sm-base);
  color: var(--sm-fg);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background .15s, color .15s;
}

/* ── COMMON UTILITY CLASSES ───────────────────────────────────────── */
.mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; }
.serif-italic { font-family: 'Playfair Display', Georgia, serif; font-style: italic; }

/* ── NAV — locked structure across all landing pages ─────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  background: linear-gradient(to bottom, var(--sm-base) 60%, transparent);
}
@media (max-width: 720px) {
  nav { padding: 18px 24px; }
}
.nav-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--sm-fg);
}
.nav-mark .glyph { width: 22px; height: 22px; display: block; }
/* Wordmark — Inter Bold, tight tracking. Web-loaded for PC/Mac parity. */
.nav-mark .word {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--sm-fg);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--sm-muted);
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: color 0.18s;
}
.nav-links a:hover,
.nav-links a.current { color: var(--sm-fg); }

/* Theme toggle — moon/sun motif. Honors the user's browser preference
   by default; live OS changes follow via matchMedia. Icon shown is the
   DESTINATION mode (sun in dark = tap to go light; moon in light = tap
   to go dark). CSS-only swap via :root state classes. */
.theme-toggle {
  background: transparent;
  color: var(--sm-muted);
  padding: 6px;
  margin: 0 -4px;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: color 0.18s, background 0.18s;
}
.theme-toggle:hover { color: var(--sm-fg); background: var(--sm-edge); }
.theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  .theme-toggle .icon-sun  { display: block; }
  .theme-toggle .icon-moon { display: none; }
}
html.force-light .theme-toggle .icon-sun  { display: none; }
html.force-light .theme-toggle .icon-moon { display: block; }
html.force-dark  .theme-toggle .icon-sun  { display: block; }
html.force-dark  .theme-toggle .icon-moon { display: none; }

/* ── BUTTONS — canonical primary/secondary across both pages ──────────
   Locked 2026-05-17 PM by Mara. Two surfaces previously redeclared their
   own .btn / .btn-primary / .btn-secondary with different radii and
   paddings (index used 8px square, pricing used 999px pill). Promote the
   square 8px variant to the default (product-feel; matches the side
   panel + receipt language) and expose a .btn-pill modifier for the
   marketing-shaped pill used on pricing CTAs. Pages may still override
   sizing inline for context-specific calls (e.g. nav "Add to Chrome"). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: 0.005em;
  text-decoration: none; border-radius: 8px; cursor: pointer; border: none;
  padding: 11px 22px;
  transition: opacity 0.18s, background 0.18s, color 0.18s, transform 0.08s;
  min-height: 44px;
}
.btn-primary { background: var(--sm-accent); color: var(--sm-ink); }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary {
  background: transparent; color: var(--sm-fg);
  box-shadow: inset 0 0 0 1px var(--sm-outline);
}
.btn-secondary:hover { color: var(--sm-accent-ink); }
.btn-pill { border-radius: 999px; padding: 12px 22px; }
.btn:active { transform: scale(0.985); }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER — single universal footer for every landing page.
   Locked 2026-05-17 PM. Each page MUST render the same markup; CSS
   here is the only definition. Per-page overrides are forbidden.
   ══════════════════════════════════════════════════════════════════ */
footer {
  max-width: 1240px;
  margin: 0 auto;
  padding: 60px 48px 48px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  border-top: 1px solid var(--sm-edge);
}
.foot-left, .foot-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foot-right { align-items: flex-end; text-align: right; }
.foot-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--sm-fg);
}
.foot-mark svg { width: 22px; height: 22px; display: block; color: var(--sm-fg); }
.foot-mark .word {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--sm-fg);
}
.foot-tagline {
  font-size: 13px;
  color: var(--sm-subtle);
}
.foot-links {
  list-style: none;
  display: flex;
  gap: 22px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.foot-links a {
  font-size: 13px;
  color: var(--sm-muted);
  text-decoration: none;
  transition: color 0.18s;
}
.foot-links a:hover { color: var(--sm-fg); }
.foot-copy {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sm-subtle);
  font-weight: 600;
}
@media (max-width: 720px) {
  footer { padding: 40px 24px 32px; flex-direction: column; }
  .foot-right { align-items: flex-start; text-align: left; }
  .foot-links { justify-content: flex-start; }
}