/* ==========================================================================
   VRC PROPERTIES — DESIGN TOKENS
   All colors, type, spacing and motion values live here so every other
   stylesheet stays declarative and themeable from one place.
   ========================================================================== */

:root {
  /* ---------- Color palette ---------- */
  --color-primary: #E56A2E;
  --color-primary-dark: #C4571F;
  --color-secondary: #FFFFFF;
  --color-bg: #FAF8F5;
  --color-dark: #121212;
  --color-dark-soft: #1A1A1A;
  --color-accent: #FF7A30;
  --color-border: #ECECEC;

  --color-text-dark: #121212;
  --color-text-muted: #6B6B6B;
  --color-text-light: #FFFFFF;
  --color-text-light-muted: rgba(255, 255, 255, 0.72);

  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-dark-overlay: linear-gradient(180deg, rgba(18,18,18,0.15) 0%, rgba(18,18,18,0.65) 70%, rgba(18,18,18,0.92) 100%);
  --gradient-cta: linear-gradient(120deg, #C4571F 0%, var(--color-primary) 50%, var(--color-accent) 100%);

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

  --fs-hero: clamp(2.4rem, 4.2vw, 3.6rem);
  --fs-h1: clamp(2rem, 3.4vw, 2.8rem);
  --fs-h2: clamp(1.7rem, 2.6vw, 2.25rem);
  --fs-h3: 1.35rem;
  --fs-h4: 1.1rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;

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

  /* ---------- Spacing scale ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---------- Radius & shadow ---------- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px rgba(18, 18, 18, 0.06);
  --shadow-card: 0 18px 45px rgba(18, 18, 18, 0.09);
  --shadow-card-hover: 0 26px 60px rgba(229, 106, 46, 0.18);
  --shadow-elevated: 0 30px 70px rgba(18, 18, 18, 0.28);

  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-blur: blur(18px);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
  --duration-slow: 0.8s;

  /* ---------- Layout ---------- */
  --navbar-height: 88px;
  --z-navbar: 900;
  --z-loader: 1000;
  --z-lightbox: 950;
}