/* tokens.css — placeholder styles and design tokens for belluna.club
   Ported from prototypes/assets/tokens.css */

/* ── CSS custom properties (design tokens) ───────────────────────── */
:root {
  --cream-50:  #FAF7F2;
  --cream-100: #F3EDE3;
  --cream-200: #E8DECF;
  --ink-900:   #1A1A1A;
  --ink-700:   #3A3A3A;
  --ink-500:   #6B6B6B;
  --ink-300:   #B5B5B5;
  --ink-100:   #E5E5E5;
  --wine-900:  #3D1822;
  --wine-700:  #5C2330;
  --wine-600:  #7A2E3F;
  --wine-500:  #94455A;
  --wine-100:  #F2E4E6;
  --clay-600:  #A78A6F;
  --clay-100:  #EDE3D6;
  --success-600: #2F7A4A;
  --success-100: #E3F0E8;
  --danger-600:  #B33A3A;
  --danger-100:  #F5E1E1;
}

/* ── Base ─────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── Typography (fallback — Tailwind fontFamily overrides via config) */
html { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

h1, h2, h3, h4, .font-serif {
  font-family: 'Fraunces', Georgia, serif;
  font-feature-settings: "ss01", "ss02";
  letter-spacing: -0.01em;
}

h1 { letter-spacing: -0.02em; }

/* ── Tabular numerals ─────────────────────────────────────────────── */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Link reset ───────────────────────────────────────────────────── */
a { color: inherit; text-decoration: none; }

/* ── Focus ring (wine-600 glow, accessible) ───────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(122, 46, 63, 0.2);
}

/* ── Lucide icons ─────────────────────────────────────────────────── */
[data-lucide] { display: inline-block; vertical-align: middle; }

/* ── Thin scrollbar for catalog / breadcrumb lists ───────────────── */
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-thumb {
  background: var(--ink-100);
  border-radius: 3px;
}
.thin-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }
.thin-scroll { scrollbar-width: thin; }

/* ── Photo placeholder (warm cream gradient) ─────────────────────── */
.photo-ph {
  background: linear-gradient(135deg, var(--cream-100) 0%, var(--cream-200) 100%);
  position: relative;
  overflow: hidden;
}
.photo-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(167, 138, 111, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(122, 46, 63, 0.10) 0%, transparent 50%);
}

/* ── Map placeholder (diagonal hatch on warm grey) ───────────────── */
.map-ph {
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(167, 138, 111, 0.07) 12px 13px),
    linear-gradient(180deg, #EFEAE0 0%, #E8DECF 100%);
  position: relative;
}

/* ── Animated underline ───────────────────────────────────────────── */
.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease-out;
}
.link-underline:hover { background-size: 100% 1px; }

/* ── Soft shadows (also defined via Tailwind config, kept here for
      non-Tailwind contexts and CSS-only components) ─────────────── */
.shadow-soft-sm { box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04); }
.shadow-soft-md { box-shadow: 0 4px 12px rgba(26, 26, 26, 0.06); }
.shadow-soft-lg { box-shadow: 0 12px 32px rgba(26, 26, 26, 0.08); }

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}