/* ============================================
   KAYJAH DESIGN STUDIO — Design Tokens
   ============================================ */

:root {
  /* -- Surfaces (light) -- */
  --surface-0:     #f8f6f1;
  --surface-1:     #f3ede4;
  --surface-2:     #ebe3d7;
  --surface-3:     #dfd6c8;

  /* -- Surfaces (dark) -- */
  --dark-0:        #0f0d0a;
  --dark-1:        #1a1714;
  --dark-2:        #252119;

  /* -- Gold accent (shared across pages) -- */
  --gold:          #C8A97E;
  --gold-light:    rgba(200, 169, 126, 0.15);
  --gold-muted:    rgba(200, 169, 126, 0.5);

  /* -- Dark page backgrounds -- */
  --page-dark:     #003645;
  --page-dark-alt: #00283a;

  /* -- Body text on dark -- */
  --body-on-dark:  rgba(248, 246, 241, 0.65);

  /* -- Accent (deep teal) -- */
  --accent:        #003645;
  --accent-light:  #3a9bb5;
  --accent-muted:  rgba(0, 54, 69, 0.12);
  --accent-border: rgba(0, 54, 69, 0.2);

  /* -- Ink (dark text) -- */
  --ink:           #1a1714;
  --ink-2:         #3d352b;
  --ink-muted:     #7a6d5e;

  /* -- Light text (on dark backgrounds) -- */
  --light:         #f0e8db;
  --light-2:       #c5b8a5;
  --light-muted:   #6a5e50;

  /* -- Typography -- */
  --serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:   'DM Sans', system-ui, -apple-system, sans-serif;

  /* -- Easing -- */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:   cubic-bezier(0.33, 1, 0.68, 1);
  --ease-soft:  cubic-bezier(0.25, 0.1, 0.25, 1);

  /* -- Spacing scale -- */
  --space-xs:  clamp(0.5rem, 1vw, 0.75rem);
  --space-sm:  clamp(1rem, 2vw, 1.5rem);
  --space-md:  clamp(2rem, 4vw, 3.5rem);
  --space-lg:  clamp(4rem, 8vw, 7rem);
  --space-xl:  clamp(6rem, 12vw, 10rem);
  --space-2xl: clamp(8rem, 16vw, 14rem);

  /* -- Container -- */
  --container:        1340px;
  --container-narrow: 780px;
  --gutter:           clamp(1.5rem, 5vw, 5rem);

  /* -- Nav heights -- */
  --nav-height-mobile: 56px;   /* < 768px */
  --nav-height-tablet: 64px;   /* 768px - 1023px */
  --nav-height-desktop: 72px;  /* >= 1024px */

  /* -- Z-index scale -- */
  --z-grain:     800;
  --z-nav:       1000;
  --z-mobile-nav: 999;
  --z-nav-toggle: 1001;
  --z-whatsapp:  2000;
  --z-lightbox:  5000;
  --z-transition: 6000;
  --z-loader:    7000;
  --z-cursor:    9000;
  --z-cursor-ring: 8999;

  /* -- Shadows -- */
  --shadow-sm: 0 2px 12px rgba(26, 20, 15, 0.06);
  --shadow-md: 0 6px 28px rgba(26, 20, 15, 0.09);
  --shadow-lg: 0 16px 56px rgba(26, 20, 15, 0.12);
}