/* ============================================================
   SHUBHDEEP METIER — DESIGN TOKENS
   Domain: sdmlt.in
   Brand System: Confirmed 31 Aug 2026
   ============================================================ */

:root {

  /* ──────────────────────────────────────────
     COLOR PALETTE (from brand style guide)
  ────────────────────────────────────────── */
  --color-bg-main:        #F7F3EE;
  --color-bg-surface:     #FFFDFC;
  --color-text-primary:   #302722;
  --color-text-secondary: #756B65;
  --color-clay:           #A86F62;
  --color-clay-hover:     #8f5c50;
  --color-clay-light:     #EDD9D4;
  --color-gold:           #C3A46D;
  --color-gold-light:     #EDE0C8;
  --color-border:         #E5DDD5;
  --color-border-strong:  #CFC4BA;
  --color-sage:           #7D897A;
  --color-white:          #FFFFFF;
  --color-black:          #1A1110;
  --color-overlay:        rgba(48, 39, 34, 0.55);
  --color-overlay-light:  rgba(247, 243, 238, 0.88);
  --color-whatsapp:       #25D366;
  --color-whatsapp-dark:  #128C7E;

  /* ──────────────────────────────────────────
     TYPOGRAPHY
  ────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-hero:    clamp(2.5rem, 6vw + 1rem, 4.75rem);
  --text-h1:      clamp(2.25rem, 5vw + 0.5rem, 4.25rem);
  --text-h2:      clamp(1.875rem, 3.5vw + 0.5rem, 3.5rem);
  --text-h3:      clamp(1.375rem, 2vw + 0.25rem, 2.25rem);
  --text-h4:      clamp(1.125rem, 1.5vw + 0.125rem, 1.625rem);
  --text-body-lg: 1.125rem;
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-xs:      0.8125rem;
  --text-label:   0.75rem;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.15em;

  /* ──────────────────────────────────────────
     SPACING
  ────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  --section-py:    clamp(3.5rem, 8vw, 9rem);
  --section-py-sm: clamp(2.5rem, 5vw, 5rem);
  --section-py-lg: clamp(5rem, 10vw, 11rem);

  /* ──────────────────────────────────────────
     LAYOUT
  ────────────────────────────────────────── */
  --container-max: 1360px;
  --container-px:  clamp(1rem, 5vw, 5rem);
  --grid-gap:      clamp(1rem, 2vw, 1.5rem);

  /* ──────────────────────────────────────────
     BORDERS & RADIUS
  ────────────────────────────────────────── */
  --radius-xs:   0.25rem;
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ──────────────────────────────────────────
     SHADOWS
  ────────────────────────────────────────── */
  --shadow-xs:         0 1px 2px rgba(48, 39, 34, 0.06);
  --shadow-sm:         0 2px 8px rgba(48, 39, 34, 0.08);
  --shadow-md:         0 4px 20px rgba(48, 39, 34, 0.10);
  --shadow-lg:         0 8px 40px rgba(48, 39, 34, 0.12);
  --shadow-card-hover: 0 8px 32px rgba(168, 111, 98, 0.12);

  /* ──────────────────────────────────────────
     TRANSITIONS
  ────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  --transition-base: var(--duration-base) var(--ease-standard);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* ──────────────────────────────────────────
     Z-INDEX
  ────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;

  /* ──────────────────────────────────────────
     NAVBAR
  ────────────────────────────────────────── */
  --navbar-height:          72px;
  --navbar-height-scrolled: 60px;
  --announcement-height:    38px;
}