/* === design-system.css === */
/* Bei.Gretel "Luxury Wellness Noir" Design Tokens */
/* Bypasses scssphp v0.8.0 — loaded via <link> */

:root {
  /* BACKGROUNDS */
  --bg-noir:        #0d0d0d;
  --bg-deep:        #1a1a1a;
  --bg-forest:      #0f2a1f;
  --bg-crimson:     #2a0f15;
  --bg-warm:        #1a1510;

  /* ACCENT COLORS */
  --gold:           #c9a84c;
  --gold-light:     #e0c972;
  --gold-muted:     rgba(201,168,76,0.3);
  --crimson:        #8b2232;
  --crimson-light:  #b6262d;
  --forest:         #2d5a3f;
  --forest-light:   #3d7a55;

  /* TEXT */
  --text-primary:   #f5f0e8;
  --text-secondary: rgba(245,240,232,0.7);
  --text-muted:     rgba(245,240,232,0.4);
  --text-gold:      #c9a84c;
  --text-dark:      #1a1a1a;

  /* GLASSMORPHISM */
  --glass-bg:       rgba(255,255,255,0.06);
  --glass-bg-hover: rgba(255,255,255,0.10);
  --glass-border:   rgba(255,255,255,0.12);
  --glass-border-hover: rgba(255,255,255,0.20);
  --glass-blur:     20px;

  /* SPACING */
  --section-pad-y:  clamp(4rem, 8vw, 8rem);
  --section-pad-x:  clamp(1.5rem, 5vw, 6rem);
  --card-padding:   clamp(1.5rem, 3vw, 2.5rem);
  --gap-sm:         0.75rem;
  --gap-md:         1.5rem;
  --gap-lg:         3rem;
  --gap-xl:         5rem;

  /* BORDERS */
  --radius-sm:      8px;
  --radius-md:      16px;
  --radius-lg:      24px;
  --radius-full:    9999px;

  /* SHADOWS */
  --shadow-glass:   0 8px 32px rgba(0,0,0,0.3);
  --shadow-glow:    0 0 40px rgba(201,168,76,0.15);
  --shadow-deep:    0 20px 60px rgba(0,0,0,0.5);

  /* TRANSITIONS */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:       200ms;
  --dur-base:       400ms;
  --dur-slow:       800ms;
  --dur-crawl:      1600ms;

  /* Z-INDEX */
  --z-header:       1000;
  --z-nav-overlay:  999;
  --z-popup:        10000;
}