/**
 * Sach & Vogue design tokens.
 * Rolex green is intentionally NOT a global brand colour.
 */
:root {
  /* Colour — surfaces */
  --sv-color-ivory: #f7f4ef;
  --sv-color-warm-white: #faf8f4;
  --sv-color-cream: #efe8dd;
  --sv-color-surface: #ffffff;
  --sv-color-surface-muted: var(--sv-color-ivory);

  /* Colour — ink */
  --sv-color-charcoal: #262220;
  --sv-color-charcoal-deep: #1d1a17;
  --sv-color-ink: #1f1f1f;
  --sv-color-ink-soft: #3a352d;
  --sv-color-muted: #6c635a;
  --sv-color-grey-warm: #8a8176;

  /* Colour — accent */
  --sv-color-gold: #9b7748;
  --sv-color-gold-soft: #b99155;
  --sv-color-gold-on-dark: #c9a877;

  /* Semantic */
  --sv-color-success: #2f6b4f;
  --sv-color-warning: #9a6b2f;
  --sv-color-error: #8a2f2f;
  --sv-color-info: #3a5a78;

  /* Reserved — do not use as global brand (future Global Network page only) */
  --sv-color-network-green-reserved: #006039;

  /* Typography
   *
   * Self-hosted brand faces (see css/base/fonts.css). These replace the former
   * dependency on Iowan Old Style / Avenir Next, which are Apple system fonts:
   * they are licensed for use on Apple devices, cannot be self-hosted, and left
   * the brand rendering in Georgia / Arial on Linux and Android.
   *
   * The trailing families are terminal fallbacks only - they apply for the
   * moment before the webfont paints, not as the intended brand face.
   */
  --sv-font-serif: "Source Serif 4 Variable", Palatino, "Times New Roman", serif;
  --sv-font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;

  --sv-fs-display: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  --sv-fs-h1: clamp(1.875rem, 1.5rem + 1.2vw, 2.75rem);
  --sv-fs-h2: clamp(1.5rem, 1.3rem + 0.7vw, 2rem);
  --sv-fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --sv-fs-body: 1.0625rem;
  --sv-fs-small: 0.875rem;
  --sv-lh-body: 1.65;
  --sv-lh-heading: 1.2;

  /* Spacing — 8px scale */
  --sv-space-1: 0.25rem;
  --sv-space-2: 0.5rem;
  --sv-space-3: 0.75rem;
  --sv-space-4: 1rem;
  --sv-space-5: 1.5rem;
  --sv-space-6: 2rem;
  --sv-space-7: 3rem;
  --sv-space-8: 4rem;
  --sv-space-section: clamp(3rem, 2.5rem + 2vw, 5rem);
  --sv-gutter: clamp(1rem, 0.6rem + 2vw, 1.75rem);

  /* Layout */
  --sv-width-wide: 1240px;
  --sv-width-standard: 1120px;
  --sv-width-reading: 720px;
  --sv-header-height: 4.5rem;
  /* Desktop mega nav: content-width based (nowrap labels + logo + gaps). */
  --sv-nav-desktop-min: 1366px;
  --sv-hero-height-compact: min(48vh, 28rem);
  --sv-hero-height-standard: min(72vh, 42rem);
  --sv-hero-height-cinematic: min(88vh, 52rem);

  /* Motion */
  --sv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sv-duration-fast: 150ms;
  --sv-duration: 220ms;
  --sv-duration-slow: 320ms;

  /* Z-index */
  --sv-z-header: 200;
  --sv-z-mega: 210;
  --sv-z-drawer-backdrop: 220;
  --sv-z-drawer: 230;
  --sv-z-skip: 300;
  /* Admin toolbar / displace sits above via Drupal; keep room below */
  --sv-z-admin-compat: 501;

  /* Borders */
  --sv-border: rgba(31, 31, 31, 0.12);
  --sv-shadow-soft: 0 1px 2px rgba(31, 27, 24, 0.05);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sv-duration-fast: 1ms;
    --sv-duration: 1ms;
    --sv-duration-slow: 1ms;
  }
}