/* Sidewalk brand tokens — lifted from apps/sidewalk/sln/skin.ts.
   Shared across all landing-page variations so the aesthetic stays
   anchored to the real app skin. */

:root {
  /* palette */
  --bg: #f6f3ea;
  --surface: #fefcf4;
  --surface-elevated: #ece6d4;
  --text: #1c1c19;
  --text-warm: #2d2d28;
  --text-muted: #7a7568;
  --border: #e0d9c3;
  --border-strong: #c9b890;
  --accent: #1f4d3f; /* forest */
  --accent-soft: #2d6b58;
  --accent-text: #fefcf4;
  --amber: #d96f4d; /* danger/warmth accent */
  --amber-text: #fefcf4;

  /* type */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;

  /* shape — skin declares md/lg = 14 */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* rhythm */
  --maxw: 1140px;
  --gutter: clamp(20px, 5vw, 48px);
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  font-size: 17px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  /* iOS-clip rule from CLAUDE.md: bold display needs lineHeight >= 1.15x.
     Browser is forgiving but we keep the habit. */
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

a { color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* Recolorable brand assets via CSS mask: the SVG's filled shapes become
   the alpha mask, `background` paints them. Set `color` to recolor; the
   paw + seams stay transparent to whatever's behind. */
.brand {
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}
.brand-mark { --src: url('brand-mark.svg'); aspect-ratio: 1; }
.brand-wordmark { --src: url('wordmark.svg'); aspect-ratio: 216 / 39; }
.brand-paw { --src: url('paw.svg'); aspect-ratio: 273 / 294; }

/* horizontal lockup: mark + wordmark, vertically centered */
.lockup { display: inline-flex; align-items: center; gap: 0.6em; color: var(--accent); }
.lockup .brand-mark { height: 1.6em; }
.lockup .brand-wordmark { height: 0.92em; }