/* Bubba marketing site — shared styles.
 * Design-system tokens mirrored from the Claude Design "Bubba" project
 * (_ds/bubba-design-system tokens: colors, typography, spacing, shadows).
 * This is the single source for the landing + privacy + app-preview pages.
 * Values are literal so the static site has no build step. */

/* ============ FONTS (self-hosted, copied from packages/web/public/fonts) ============ */
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Perfectly Nineties'; src: url('fonts/PerfectlyNineties-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Perfectly Nineties'; src: url('fonts/PerfectlyNineties-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Perfectly Nineties'; src: url('fonts/PerfectlyNineties-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'ElevenEleven'; src: url('fonts/ElevenEleven-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }

/* ============ TOKENS ============ */
:root {
  /* brand */
  --moss: #3F4E41; --sage: #6E7B6C; --peach: #E99A75;
  --moss-hover: #354337; --moss-press: #2C3730;
  --sage-tint: #EAEDE7; --peach-tint: #F7E4D8;
  /* ink */
  --ink: #202329; --ink-soft: #5B655D; --ink-faint: #8C9189; --ink-on-dark: #F4EFE8;
  /* surfaces */
  --paper: #FBF8F3; --bone: #F2EAE2; --paper-2: #F6F0E8; --surface: #FFFFFF;
  --border: #E8DECF; --border-soft: #EFE7DB; --border-strong: #D9CBB8;
  /* status */
  --good: #4F7256; --due: #C9784E; --overdue: #B24A33; --info: #4E6B73;
  --good-tint: #E6EDE6; --due-tint: #F6E6DA; --overdue-tint: #F3E0DA; --info-tint: #E1EAEC;
  /* type */
  --font-sans: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Perfectly Nineties', Georgia, 'Times New Roman', serif;
  --font-label: 'ElevenEleven', system-ui, sans-serif;
  /* radius */
  --radius-input: 11px; --radius-card: 14px; --radius-pill: 999px;
  /* shadow */
  --shadow-xs: 0 1px 2px rgba(32,35,41,0.04);
  --shadow-sm: 0 1px 2px rgba(32,35,41,0.04), 0 2px 6px rgba(63,78,65,0.05);
  --shadow-md: 0 2px 4px rgba(32,35,41,0.04), 0 8px 20px rgba(63,78,65,0.07);
  --shadow-lg: 0 4px 8px rgba(32,35,41,0.05), 0 18px 40px rgba(63,78,65,0.10);
  /* motion */
  --ease-standard: cubic-bezier(0.2,0,0.2,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}

/* ============ BASE ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--moss); text-decoration: none; }
a:hover { color: var(--moss-hover); }
img { max-width: 100%; }

/* ============ BUTTON (mirrors the DS Button component) ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; line-height: 1; white-space: nowrap;
  border: none; border-radius: var(--radius-pill); cursor: pointer; text-align: center;
  transition: background 160ms var(--ease-standard), transform 160ms var(--ease-standard); }
.btn:active { transform: translateY(1px); }
.btn-md { font-size: 15px; padding: 0 18px; height: 40px; }
.btn-lg { font-size: 16px; padding: 0 22px; height: 50px; }
.btn-primary { background: var(--moss); color: var(--ink-on-dark); }
.btn-primary:hover { background: var(--moss-hover); color: var(--ink-on-dark); }
.btn-accent { background: var(--peach); color: #3A2416; }
.btn-accent:hover { background: #E08B62; color: #3A2416; }

/* ============ SHARED HELPERS ============ */
.nav-link { color: var(--ink); font-size: 15px; font-weight: 500; transition: color 160ms var(--ease-standard); }
.nav-link:hover { color: var(--moss); }
.link-underline:hover { text-decoration: underline; }
input[type="email"]:focus { border-color: var(--sage) !important; box-shadow: 0 0 0 3px rgba(110,123,108,0.28) !important; }
.card-lift { transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.card-lift:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.photo-zoom { overflow: hidden; }
.photo-zoom img { transition: transform 640ms var(--ease-out); }
.photo-zoom:hover img { transform: scale(1.045); }
header.scrolled { box-shadow: var(--shadow-sm); background: rgba(251,248,243,0.97) !important; }

/* ============ SCROLL REVEAL ============ */
body.reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
body.reveal-ready [data-reveal].in { opacity: 1; transform: none; }
@keyframes heroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
body.reveal-ready .hero-anim { animation: heroRise 720ms var(--ease-out) both; }

/* ============ PAW CURSOR TRAIL ============ */
@keyframes pawstep {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--rot)) scale(0.5); }
  18% { opacity: 0.85; transform: translate(-50%,-50%) rotate(var(--rot)) scale(1); }
  62% { opacity: 0.85; transform: translate(-50%,-50%) rotate(var(--rot)) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--rot)) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  body.reveal-ready .hero-anim { opacity: 1 !important; animation: none !important; }
  body.reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .photo-zoom:hover img { transform: none !important; }
  html { scroll-behavior: auto; }
}