/* The Enchanted Rooms — design tokens
   Source of truth. Every colour, size, radius and duration lives here once.
   Palette taken from the shop itself: the malachite-and-gold mural behind the
   shelves, and the navy-teal ground of her logo.
   Whinstone Studio, 9 September 2026. */

:root {
  /* ---- Colour: background ramp ---------------------------------------- */
  --er-bg-sunken:  #0C171C;
  --er-bg-base:    #182631;
  --er-bg-raised:  #21323D;

  /* ---- Colour: foreground ramp ---------------------------------------- */
  --er-fg-primary:   #F4EFE4;
  --er-fg-secondary: #C8BFAE;
  --er-fg-muted:     #8A8375;

  /* ---- Colour: accents — malachite from the mural, gold from the shelving */
  --er-malachite:       #1E8C6E;
  --er-malachite-deep:  #0E5643;
  --er-malachite-glow:  #35C79B;
  --er-gold:            #C9A227;
  --er-gold-soft:       #E3C463;
  --er-gold-hover:      #F0D98A;

  /* ---- Colour: semantic ------------------------------------------------ */
  --er-success: #35C79B;
  --er-warning: #E3C463;
  --er-error:   #D9705E;

  /* ---- Type ------------------------------------------------------------ */
  --er-font-display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --er-font-body: Karla, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --er-step--1: 0.8125rem;
  --er-step-0:  1rem;
  --er-step-1:  1.25rem;
  --er-step-2:  1.75rem;
  --er-step-3:  2.75rem;
  --er-step-4:  clamp(2.75rem, 9vw, 5rem);

  --er-lh-tight: 1.08;
  --er-lh-snug:  1.35;
  --er-lh-body:  1.65;

  --er-ls-display: -0.01em;
  --er-ls-label:   0.24em;

  /* ---- Spacing: 8px base ----------------------------------------------- */
  --er-space-1: 0.5rem;
  --er-space-2: 1rem;
  --er-space-3: 1.5rem;
  --er-space-4: 2rem;
  --er-space-5: 3rem;
  --er-space-6: 4.5rem;
  --er-space-7: 7rem;

  /* ---- Radius, border, elevation --------------------------------------- */
  --er-radius-sm: 4px;
  --er-radius-md: 10px;
  --er-radius-lg: 20px;
  --er-radius-pill: 999px;

  --er-border-hairline: 1px solid rgba(201, 162, 39, 0.22);
  --er-border-soft:     1px solid rgba(244, 239, 228, 0.12);

  --er-shadow-soft: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
  --er-shadow-glow: 0 0 80px -10px rgba(53, 199, 155, 0.35);

  /* ---- Motion: slow and mineral. Nothing snaps. ------------------------ */
  --er-dur-quick: 180ms;
  --er-dur-calm:  520ms;
  --er-dur-drift: 9s;
  --er-dur-charge: 7s;
  --er-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --er-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

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