/*
 * Lola's Party Co. | Brand Foundation
 *
 * Two layers:
 *   --brand-*   raw palette (exact eyedropper values from brand kit)
 *   --color-*   role tokens (semantic, what each color is for)
 *
 * Change --color-* to re-map roles without touching the palette.
 */

@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* Palette values from brand kit eyedropper */
  --brand-lavender: #e3c9e6;
  --brand-peach:    #fe9c93;
  --brand-cream:    #f7e6c8;
  --brand-gold:     #f6cd95;

  /* Role tokens */
  --color-hero-bg:    var(--brand-lavender);
  --color-cta:        var(--brand-peach);
  --color-cta-hover:  #fd8278;
  --color-card-bg:    var(--brand-cream);
  --color-accent:     var(--brand-gold);
  --color-page-bg:    #fffaf2;
  --color-text:       #3d2a4a;
  --color-text-muted: #6b5870;
  --color-border:     #f0dcc4;  /* cream, slightly darkened for visibility on cream bg */

  /* Fonts */
  --font-script: 'Pacifico', cursive;
  --font-body:   'Montserrat', system-ui, sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-page-bg);
}

.script-font {
  font-family: var(--font-script);
}