/* ==========================================================================
   Design tokens — Virtuoso Catering House
   ========================================================================== */
:root {
  /* Palette */
  --color-charcoal: #2F352B;
  --color-charcoal-light: #3B4235;
  --color-ivory: #FDF8F0;
  --color-ivory-dim: #F3ECDF;
  --color-gold: #C9A768;
  --color-gold-soft: #DCC594;
  --color-wine: #5E1B22;
  --color-wine-light: #7A252E;

  --color-white: #FFFFFF;
  --color-black: #17190F;

  /* Semantic */
  --bg-light: var(--color-ivory);
  --bg-dark: var(--color-charcoal);
  --text-on-light: var(--color-charcoal);
  --text-on-dark: var(--color-ivory);
  --text-muted-light: rgba(47, 53, 43, 0.64);
  --text-muted-dark: rgba(253, 248, 240, 0.64);

  /* Typography */
  --font-serif: "Instrument Serif", "Playfair Display", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.5rem, 1.9rem + 3vw, 5.5rem);
  --fs-h1: clamp(2.5rem, 2.2rem + 3vw, 5rem);
  --fs-h2: clamp(2rem, 1.7rem + 2vw, 3.5rem);
  --fs-h3: clamp(1.35rem, 1.2rem + 0.8vw, 1.9rem);
  --fs-body-lg: clamp(1.1rem, 1rem + 0.4vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.7;

  --tracking-eyebrow: 0.18em;
  --tracking-wide: 0.04em;

  /* Spacing rhythm */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 6rem;
  --space-2xl: 9rem;
  --space-3xl: 12rem;

  --section-pad-y: clamp(4.5rem, 4rem + 3vw, 9rem);
  --container-pad-x: clamp(1.25rem, 1rem + 3vw, 5rem);
  --container-max: 1440px;

  /* Motion */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-premium: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 0.35s;
  --dur-medium: 0.7s;
  --dur-slow: 1.1s;

  /* Layers */
  --z-cursor: 9999;
  --z-preloader: 9000;
  --z-nav: 800;
  --z-mobile-menu: 850;
  --z-lightbox: 900;

  --border-hairline: 1px solid rgba(201, 167, 104, 0.4);
}