/* ============================================================
   THEME — colours, fonts, background artwork
   ------------------------------------------------------------
   This is one of only two files you edit for a new client.
   The other is brand.js (names, prices, keys).

   Nothing here is specific to booking logic — change freely.
   ============================================================ */

/* ---- 1. FONTS -------------------------------------------------
   Pick any three from fonts.google.com and paste the import.
   Current set: Pinyon Script (name) · Bodoni Moda (headings)
                · Karla (body)
   Other combinations that work well:
     Sacramento  + Marcellus    + Quicksand   (soft, romantic)
     Mrs Saint Delafield + Prata + Outfit     (modern)
     Italiana    + Italiana     + Manrope     (no script at all)
--------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400;1,6..96,500&family=Karla:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Pinyon+Script&display=swap');

:root{
  /* the three faces, referenced everywhere by these names */
  --font-script:  'Pinyon Script', cursive;   /* her name, deal titles */
  --font-display: 'Bodoni Moda', serif;       /* headings, prices, buttons */
  --font-body:    'Karla', sans-serif;        /* everything else */

  /* ---- 2. COLOURS --------------------------------------------
     --plum is the one that changes the character most: it drives
     the name, section headings, calendar month and button hovers.
     ---------------------------------------------------------- */
  --cream:     #fdf2f7;   /* page background */
  --blush:     #fef5f9;   /* calendar day cells, hover fills */
  --blush-2:   #fbe8f0;   /* hairlines, borders */
  --pink:      #fbd5e5;   /* dotted leaders, light borders */
  --pink-deep: #f5bcd6;   /* announcement bar, bowed button border */
  --ribbon:    #f0a8c8;   /* selected day/slot, admin buttons */
  --pink-dark: #cf85a8;   /* prices, category headings, button text */
  --plum:      #7c3f5e;   /* HER NAME + section headings */

  --ink:       #7a5b6a;   /* body text — darkest thing on the page */
  --ink-soft:  #a89099;   /* captions, taglines, hints */
  --white:     #fffdfe;   /* cards */

  /* availability dots on the calendar. Semantic, not decorative:
     --pip-open is "slot free", --pip-taken is "slot gone". Keep them
     clearly different from each other in whatever palette you pick. */
  --pip-open:  #95d3ac;
  --pip-taken: #f2d9e6;

  /* tints derived from --ribbon; update together if you change it */
  --glow:      240,168,200;   /* rgb() for shadows */
  --glow-deep: 124,63,94;     /* rgb() for the plum-tinted ones */

  /* ---- 3. BACKGROUND ARTWORK ---------------------------------
     bg-bowtile.svg is the tiled pattern, bow.svg the single motif
     used for the header, dividers and list bullets.
     Swap both files to re-theme completely.
     Larger --bg-size = fewer, more spaced-out motifs.
     ---------------------------------------------------------- */
  --bg-tile:        url(bg-bowtile.svg);
  --bg-size:        420px;
  --bg-size-mobile: 300px;
  --bg-opacity:     .8;
  --bg-opacity-admin: .45;

  --motif: url(bow.svg);   /* header, dividers, bullets, button sticker */
}