/* ============================================================
   NAILS BY KIMMY — theme
   ------------------------------------------------------------
   Sampled from her own profile artwork. brandkit read the brand
   as CHROMATIC off #980d0b, so the whole ramp is built from her
   red rather than mixed toward a neutral grey.

   This is a DARK brand: the paper is her deep red and her leopard
   print runs edge to edge behind everything, exactly as it does
   on her page. Content lives in cream cards so nothing is ever
   read against the print.
   ============================================================ */

/* typekit on her lettering: contrast 4.7 · slant 28.7° · serifs 0.37
   -> flowing high-contrast script. Great Vibes is the closest free
   match; her name is an image anyway, so the script role only
   carries deal titles and the footer. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Jost:wght@300;400;500;600;700&family=Great+Vibes&display=swap');

:root{
  --font-script:  'Great Vibes', cursive;
  --font-display: 'Playfair Display', serif;
  --font-body:    'Jost', sans-serif;

  /* ---- 2. COLOURS ------------------------------------------ */
  --cream:     #930404;   /* page background — her red ground */
  --blush:     #f4dfd2;   /* calendar day cells, hover fills, footer */
  --blush-2:   #e2bcab;   /* hairlines, borders */
  --pink:      #c98d7c;   /* dotted leaders, light borders */
  --pink-deep: #6b0605;   /* button rims */
  --ribbon:    #930404;   /* selected day/slot, admin buttons */
  --pink-dark: #8a0605;   /* prices, category headings */
  --plum:      #4a0202;   /* headings inside cards */

  --ink:       #2a0b08;   /* body text (always on a cream surface) */
  --ink-soft:  #7e5a50;
  --white:     #fbf0e8;   /* cards — her cream, off the lettering */

  /* her own colours, for the pieces that sit ON the red */
  --on-red:      #fbede2;
  --on-red-soft: #f0d2c2;
  --gold:        #e8b45c;   /* off the heart divider in her mark */

  /* the announcement bar is the one full-width band on the page —
     near-black with gold reads like the ring she puts her policy in */
  --announce-bg: linear-gradient(90deg,#150101,#3d0201);
  --on-accent:   #efd9a6;

  /* Availability dots — checked against her cream day cells, not
     against the red page. Green/blush is the widest split available
     that still sits inside her palette. */
  --pip-open:  #2f7d4f;
  --pip-taken: #d9b7a8;

  --glow:      28,1,1;
  --glow-deep: 10,0,0;

  /* ---- 3. BACKGROUND ARTWORK -------------------------------
     Her leopard, lifted spot by spot off her own artwork and made
     to tile. Sits on --cream, so the page is her print exactly.
  --------------------------------------------------------- */
  --bg-tile:        url(bg-tile.webp);
  --bg-size:        643px;
  --bg-size-mobile: 445px;
  --bg-opacity:     1;
  --bg-opacity-admin: .16;

  --motif: url(motif.webp);
}

/* ============================================================
   SHAPE LANGUAGE — glossy and bezel-set: pills, generous radii,
   deep shadows. Her nails are long, glazed and stoned; square
   corners would fight that.
   ============================================================ */
:root{
  --r-btn:    999px;
  --r-card:   22px;
  --r-tile:   12px;
  --r-input:  12px;
  --r-msg:    18px;
  --r-img:    14px;
  --r-nav:    50%;
  --r-deal:   22px;

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

  --sh-card:  0 14px 38px rgba(var(--glow-deep),.42);
  --sh-btn:   0 6px 18px rgba(var(--glow-deep),.34);
  --sh-btn-h: 0 10px 26px rgba(var(--glow-deep),.46);
  --sh-soft:  0 4px 14px rgba(var(--glow-deep),.28);
  --sh-lift:  0 8px 22px rgba(var(--glow-deep),.4);
  --sh-deal:  0 14px 38px rgba(var(--glow-deep),.42);

  --motif-rot:      10deg;
  --motif-bullet-w: 24px;
  --motif-bullet-h: 21px;
  --motif-badge-w:  36px;
  --motif-badge-h:  32px;

  --font-btn:      'Jost', sans-serif;
  --btn-weight:    600;
  --btn-transform: uppercase;
  --btn-tracking:  .14em;

  --pin-size: 17px;
  --logo-max: 420px;

  /* gallery frames stay cream on the red page */
  --ty-card:  #fbf0e8;
  --ty-line:  #e2bcab;
  --ty-icon:  #4a0202;
  --ty-heart: #930404;

  --igbox-top: #fbf0e8;
}

/* ============================================================
   ON THE RED
   ------------------------------------------------------------
   Core assumes a pale paper, so everything that sits directly on
   the background — not inside a card — is re-toned here rather
   than in core. A soft shadow keeps it legible where a spot
   happens to land behind a letter.
   ============================================================ */
h2,
.cal-head b{ color:var(--on-red); text-shadow:0 2px 10px rgba(10,0,0,.55) }

/* ...but the admin dashboard puts its headings INSIDE cards, and so does
   the Instagram box. Cream on cream would erase them. */
.card h2,
.card .cal-head b,
.ig-box h2{ color:var(--plum); text-shadow:none }

.tagline,
.loc,
.sub,
#services-sec > .hint,
.ty-small{ color:var(--on-red-soft); text-shadow:0 1px 8px rgba(10,0,0,.5) }

.ty-big,
.ty-script{ color:var(--on-red); text-shadow:0 2px 12px rgba(10,0,0,.55) }

/* gold alone disappeared wherever a black spot sat behind the link */
#services-sec > .hint a{ color:var(--on-red); border-bottom:1px solid var(--gold);
  text-shadow:0 1px 8px rgba(10,0,0,.7) }

/* the price list gets its own cream panel — a list of small rows read
   straight off leopard print is the one place this design would fail */
#services{
  background:var(--white);
  border:var(--bw-card) solid var(--blush-2);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  padding:2rem 1.6rem .8rem;
}
#services .cat:last-child{ margin-bottom:1.2rem }

/* footer sits on its own cream band, so it keeps the dark type */
footer{ color:var(--ink-soft) }
footer .script{ color:var(--plum) }

/* Core fills the deposit panel on the confirmation with --cream. On a pale
   brand that is the same tone as the card it sits in; here --cream is the
   deep red page, so the panel gets the light inset explicitly or her title
   and note disappear into it. */
.dep{ background:var(--blush); border-color:var(--blush-2) }

/* ---- admin, on the red ------------------------------------------------
   Three things in the dashboard sit on the page rather than in a card,
   and core styles them for a pale brand. The active tab is the important
   one: it fills with --ribbon, which here IS the page colour, so the tab
   you are on would vanish. */
.topbar .muted{ color:var(--on-red-soft) }
#logoutBtn{ color:var(--on-red-soft); border-color:rgba(240,210,194,.5) }
#logoutBtn:hover{ background:rgba(240,210,194,.14) }
.tab.on{ background:#2b0202; border-color:#2b0202; color:var(--on-accent) }

/* ---- section dividers -------------------------------------------------
   Her full rule — the heart with the tapered bars either side — under each
   section heading, the same mark that sits under her name in the lockup.
   The plain heart stays as --motif for the list bullets, the badge perched
   on the Book Now button and the location pin, where a wide rule does not
   fit. Core prints the motif as an <img> in the .sub, so that is hidden and
   the rule is drawn on the .sub itself. */
#deals-sec    .sub .bow[data-divider],
#services-sec .sub .bow[data-divider],
#booking      .sub .bow[data-divider],
#policy-sec   .sub .bow[data-divider]{ display:none }

#deals-sec    .sub::after,
#services-sec .sub::after,
#booking      .sub::after,
#policy-sec   .sub::after{
  content:'';
  display:block;
  width:min(320px, 74%);
  aspect-ratio:1578 / 186;
  margin:1.05rem auto 0;
  background:url(divider.webp) no-repeat center/contain;
}

/* Save Changes is the one .btn that sits on the page rather than in a card,
   and core fills .btn with --ribbon — her page colour — so the pill vanished
   into the background. Cream on red makes it the strongest thing on the tab,
   which is what a save button should be. */
#saveBtn{ background:var(--white); color:var(--pink-dark) }
#saveBtn:hover{ background:var(--blush); color:var(--plum) }
#saveBtn ~ .muted{ color:var(--on-red-soft) }