/* ════════════════════════════════════════
   STICKY — SHARED DESIGN TOKENS
   Imported by the landing page and the
   legal pages (privacy, terms). Single
   source of truth for brand palette,
   typography, and core motion.
   ════════════════════════════════════════ */

/* Self-hosted fonts — no third-party requests.
   Inter and Playfair Display are variable font files covering
   all weights in use. Latin subset only (the site ships en-US). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand */
  --color-chocolate: #2A1F14;
  --color-sienna: #E8825C;
  --color-parchment: #FAF7F2;
  --color-espresso: #1C1712;

  /* Surfaces */
  --color-card-surface: #F0EBE3;
  --color-card-dark: #2E261E;

  /* Neutrals */
  --color-gray-700: #4A433B;
  --color-gray-500: #8C8279;
  --color-gray-300: #C4BBB0;
  --color-gray-100: #F0EBE3;

  /* Typography */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shadows */
  --shadow-level1: 0 2px 4px rgba(42, 31, 20, 0.08);

  /* Radii */
  --radius-button: 16px;

  /* Transitions */
  --transition-snappy: 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ──── Reset + global smoothing (shared by landing and legal pages) ──── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ──── Shared blob silhouette ──── */
/* The warm-ink rounded-blob shape. `.blob-shape` is a bare look (radius +
   tilt) applied via HTML class — used by .nav-icon, .feature-icon, and
   .step-number. `.icon-blob` composes that shape with sizing and image
   clipping for elements that wrap an <img> (hero, footer). */
.blob-shape {
  border-radius: 50% 45% 55% 40%;
  transform: rotate(-3deg);
}

.icon-blob {
  width: var(--blob-size, 36px);
  height: var(--blob-size, 36px);
  border-radius: 50% 45% 55% 40%;
  overflow: hidden;
  transform: rotate(-3deg);
}

.icon-blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ──── Shared nav brand (used by index.html and legal pages) ──── */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* Shape (border-radius + rotation) comes from .blob-shape in the HTML. */
.nav-icon {
  width: 36px;
  height: 36px;
  overflow: hidden;
  box-shadow: var(--shadow-level1);
}

.nav-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-wordmark {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 900;
  color: var(--color-chocolate);
}

@media (prefers-color-scheme: dark) {
  .nav-wordmark { color: var(--color-gray-100); }
}