/* ─────────────────────────────────────────
   css/variables.css
   Design tokens for Rosie Crown website
───────────────────────────────────────── */

:root {
  /* Brand palette */
  --blush:     #D4A7B4;
  --rose:      #A77D90;
  --deep-rose: #6F4A5C;
  --petal:     #F1E8DF;
  --cream:     #F8F0E8;
  --charcoal:  #09060F;
  --mist:      #B8AAA2;
  --gold:      #C8B49A;
  --plum:      #211529;
  --violet:    #51405D;
  --steel:     #9AA7A7;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Spacing scale */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  100px;

  /* Section padding */
  --section-px: 64px;
  --section-py: 100px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* Z-index layers */
  --z-nav:    100;
  --z-hero:   1;
  --z-modal:  200;
}

@media (max-width: 900px) {
  :root {
    --section-px: 32px;
    --section-py: 64px;
  }
}