/* ============================================================
   NAILS X ANAHI — theme
   ------------------------------------------------------------
   Sampled off the site mock-up Edgar supplied and off her own
   logo file. Nothing here came from another client's folder.

   Her look: warm cream paper, a single hot crimson taken from
   her lip print, high-contrast serif display, and her own
   sparkles and little bows drifting behind everything.
   The kiss is the motif — bullets, dividers, button badge.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Poppins:wght@300;400;500;600&family=Pinyon+Script&display=swap');

:root{
  /* ---- FONTS ------------------------------------------------
     Her wordmark is a high-contrast didone serif, so Playfair
     carries the headings and the logo file never looks like a
     guest on the page. Pinyon is the thin flowing script her
     Instagram story headers are set in. Poppins is the quiet
     sans doing the actual reading.
  ---------------------------------------------------------- */
  --font-script:  'Pinyon Script', cursive;         /* deal titles */
  --font-display: 'Playfair Display', serif;        /* headings, prices */
  --font-body:    'Poppins', sans-serif;            /* everything else */

  /* ---- COLOURS — CHROMATIC ----------------------------------
     One accent, her lipstick red, sampled off the CTA pill in
     the mock-up (#bb052e) and off the print in her logo. Every
     other value is that red walked toward her cream paper, so
     the page never picks up a second hue.
  ---------------------------------------------------------- */
  --cream:     #fdf6f1;   /* page — her warm paper */
  --blush:     #ffe9e6;   /* calendar day cells, hover fills */
  --blush-2:   #f4d7d3;   /* hairlines, borders */
  --pink:      #eeb9b8;   /* dotted leaders, light borders */
  --pink-deep: #c50b37;   /* announcement bar, button rims */
  --ribbon:    #bb052e;   /* selected day/slot, admin buttons — her CTA red */
  --pink-dark: #93082a;   /* prices, category headings */
  --plum:      #2a1214;   /* section headings — the near-black of her footer */

  --ink:       #3b2325;   /* body text */
  --ink-soft:  #97706e;   /* captions, taglines, hints */
  --white:     #fffcfa;   /* cards */

  /* Availability dots. Her palette has no second hue to spend, so
     these separate on LIGHTNESS rather than on red-vs-green —
     which also happens to survive colour blindness better.
     Checked by eye on --blush day cells. */
  --pip-open:  #c50b37;
  --pip-taken: #ecd3ce;

  --glow:      150,62,66;   /* rgb() for shadows — warm, not grey */
  --glow-deep: 42,18,20;

  /* ---- BACKGROUND ARTWORK -----------------------------------
     Her own sparkles, bursts and little outline bows, lifted
     one at a time out of her logo file and re-tiled. Nothing
     drawn from scratch and nothing borrowed.
  ---------------------------------------------------------- */
  --bg-tile:        url(bg-tile.png);
  --bg-size:        520px;
  --bg-size-mobile: 380px;
  --bg-opacity:     .45;
  --bg-opacity-admin: .22;

  --motif: url(motif.png);   /* HER kiss — divider, bullets, button badge */
}

/* ============================================================
   SHAPE LANGUAGE
   Her mock-up is soft and glossy: full pill buttons, generously
   rounded cards, hairline borders, diffuse warm shadows. Held
   consistent so nothing on the page argues with the header.
   ============================================================ */
:root{
  --r-btn:    999px;
  --r-card:   20px;
  --r-tile:   12px;
  --r-input:  12px;
  --r-msg:    18px;
  --r-img:    16px;
  --r-nav:    50%;
  --r-deal:   20px;

  --bw:       1.5px;
  --bw-card:  1px;

  --sh-card:  0 12px 34px rgba(var(--glow),.12);
  --sh-btn:   0 6px 18px rgba(var(--glow),.22);
  --sh-btn-h: 0 10px 26px rgba(var(--glow),.30);
  --sh-soft:  0 3px 14px rgba(var(--glow),.12);
  --sh-lift:  0 8px 20px rgba(var(--glow),.24);
  --sh-deal:  0 12px 34px rgba(var(--glow),.16);

  /* The kiss perches on the corner of a button exactly the way it
     overlaps the CTA in her mock-up. Wider than tall — a lip print
     is a landscape shape, and the square defaults squash it. */
  --motif-rot:      -8deg;
  --motif-bullet-w: 26px;
  --motif-bullet-h: 18px;
  --motif-badge-w:  46px;
  --motif-badge-h:  31px;
  --bow-badge-x:    -14px;
  --bow-badge-y:    -15px;

  /* and on the deal and policy cards, off by default in core */
  --deal-bow-on:    block;
  --deal-bow-size:  58px;
  --deal-bow-y:     -20px;
  --deal-bow-x:     -12px;
  --deal-bow-rot:   -10deg;

  --policy-bow-on:   block;
  --policy-bow-size: 46px;
  --policy-bow-y:    -22px;
  --policy-bow-x:    -10px;
  --policy-bow-rot:  8deg;

  /* buttons: the quiet sans in caps, as in the mock-up */
  --font-btn:      'Poppins', sans-serif;
  --btn-weight:    600;
  --btn-transform: uppercase;
  --btn-tracking:  .14em;

  --pin-size: 17px;   /* her kiss as the location marker — wide, so a touch bigger */
  --logo-max: 460px;

  /* "See My Work" frames */
  --ty-card:  #fffcfa;
  --ty-line:  #f2d5d1;
  --ty-icon:  #93082a;
  --ty-heart: #bb052e;

  /* text that sits ON the accent — her cream, not a hard white */
  --on-accent: #fffcfa;
}

/* ============================================================
   HER TWO OVERRIDES
   Both are hers alone and live here rather than in core.
   ============================================================ */

/* 1. The primary action is a solid lipstick pill, exactly as in her
      mock-up. Core paints every .cta on --white; .ghost stays that way
      so the secondary buttons still read as secondary. */
.cta:not(.ghost){
  background: var(--ribbon);
  color: var(--on-accent);
  border-color: var(--ribbon);
}
.cta:not(.ghost):hover{
  background: var(--pink-deep);
  color: var(--on-accent);
  border-color: var(--pink-deep);
}

/* 2. Her wordmark is white letters with a soft red halo. On her cream
      paper the strokes that fall outside the lip print lose their edge,
      so give them one — a whisper of her own shadow colour, no box. */
.crown.logo{
  filter: drop-shadow(0 1px 1px rgba(var(--glow), .40))
          drop-shadow(0 0 14px rgba(var(--glow), .12));
}