/* ============================================================
   SHINE BY SPARSH — DESIGN TOKENS
   Elegant Indian beauty studio × contemporary editorial × warm hospitality
   ============================================================ */

:root {
  /* Color */
  --color-primary: #241D1A;      /* Deep Espresso */
  --color-secondary: #8D7566;    /* Warm Taupe */
  --color-accent: #C6A15B;       /* Champagne Gold */
  --color-bg: #F8F4EE;           /* Warm Ivory */
  --color-surface: #FFFDFC;      /* Soft Cream */
  --color-text: #211F1D;         /* Charcoal */
  --color-text-muted: #706963;   /* Warm Gray */
  --color-border: #E5DDD4;       /* Beige Gray */
  --color-btn-primary: #241D1A;
  --color-btn-primary-hover: #3A302B;
  --color-btn-accent: #C6A15B;
  --color-btn-accent-hover: #A98647;
  --color-on-dark: #F8F4EE;
  --color-on-dark-muted: #C9BEB2;

  /* Type */
  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.625rem, 1.9rem + 3.2vw, 4.75rem);
  --fs-h2: clamp(2.125rem, 1.7rem + 1.9vw, 3.5rem);
  --fs-h3: clamp(1.4375rem, 1.28rem + 0.7vw, 2rem);
  --fs-body-lg: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;
  --fs-btn: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.65;

  /* Space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: clamp(3.5rem, 3rem + 2vw, 6rem);
  --space-2xl: clamp(5rem, 4rem + 4vw, 9rem);

  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 0.9rem + 1.5vw, 3rem);

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Motion */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-med: 350ms;
  --dur-slow: 500ms;

  /* Shadow */
  --shadow-sm: 0 2px 10px rgba(36, 29, 26, 0.06);
  --shadow-md: 0 12px 32px rgba(36, 29, 26, 0.1);
  --shadow-lg: 0 24px 60px rgba(36, 29, 26, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}