/* ============================================================
   NAILS BY CRYSTAAXL — theme
   ------------------------------------------------------------
   Built to the glossy Y2K/coquette direction Edgar supplied, NOT
   to her Oct 2024 price card, which is a much softer frosted
   look. Sampled off the moodboard:

     accent / CTA   #e94c81
     paper          #fef5f7
     soft fill      #fedbe6
     panel          #fef8fa

   CHROMATIC ramp built from #e94c81. Body ink is that same pink
   driven down its own hue to 16:1 rather than a grey she has
   never used — the moodboard's near-black body text drains the
   brand out at small sizes.

   Nothing here came from the moodboard's own pixels: the wordmark
   in it is generated art she would not own, and the nail photos
   are not her work.
   ============================================================ */

/* ---- 1. FONTS ----------------------------------------------
   The moodboard is three voices, and core has exactly three
   slots for them:
     script  — the inflated bubble wordmark  -> Baloo 2 @800
     display — the italic serif headings     -> Playfair Display
     body    — the clean geometric sans      -> Poppins

   Baloo 2 over a heavier face like Bagel Fat One because
   --font-script also sets deal titles at 2.2rem, where a fully
   inflated face stops being readable and starts being loud.
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Poppins:wght@300;400;500;600&display=swap');

:root{
  --font-script:  'Baloo 2', cursive;                    /* her name, deal titles */
  --font-display: 'Playfair Display', serif;             /* headings, prices */
  --font-body:    'Poppins', sans-serif;                 /* everything else */

  /* ---- 2. COLOURS ------------------------------------------ */
  --cream:     #fef5f7;   /* page background — her paper */
  --blush:     #fbdfe8;   /* calendar day cells, hover fills */
  --blush-2:   #f8c6d6;   /* hairlines, borders */
  --pink:      #f4a4be;   /* dotted leaders, light borders */
  --pink-deep: #ed6e99;   /* announcement bar, button rims */
  --ribbon:    #e94c81;   /* selected day/slot, admin buttons — HER pink */
  --pink-dark: #912449;   /* prices, category headings    7.7:1 */
  --plum:      #3f0015;   /* section headings            16.0:1 */

  --ink:       #4f1427;   /* body text                   13.5:1 */
  --ink-soft:  #8c6270;   /* captions, taglines, hints    4.8:1 */
  --white:     #fffcfd;   /* cards */

  /* Availability dots. Semantic, not decorative — checked by eye
     on her paper. Jade is the only non-pink on the page, which is
     exactly why "free" reads instantly; taken is a blush that
     recedes without going disabled-grey. */
  --pip-open:  #2f8f6a;
  --pip-taken: #f7c9da;

  --glow:      233,76,129;
  --glow-deep: 63,0,21;

  /* ---- 3. BACKGROUND ARTWORK ------------------------------- */
  --bg-tile:        url(bg-tile.svg);
  --bg-size:        520px;
  --bg-size-mobile: 340px;
  --bg-opacity:     .9;
  --bg-opacity-admin: .3;

  --motif: url(motif.png);   /* her bow, keyed off its dark ground */
}

/* ============================================================
   SHAPE LANGUAGE — inflated, glossy, nothing sharp
   ------------------------------------------------------------
   Every container on the moodboard is a pill or a fat rounded
   rectangle with a soft pink shadow and no visible rim. So:
   generous radii, hairline borders, and shadows that are wide
   and pink rather than tight and grey.
   ============================================================ */
:root{
  --r-btn:    999px;                    /* pill */
  --r-card:   22px;
  --r-tile:   14px;
  --r-input:  14px;
  --r-msg:    20px;
  --r-img:    18px;
  --r-nav:    50%;
  --r-deal:   22px;

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

  --sh-card:  0 14px 40px rgba(var(--glow),.16);
  --sh-btn:   0 6px 18px  rgba(var(--glow),.30);
  --sh-btn-h: 0 10px 26px rgba(var(--glow),.42);
  --sh-soft:  0 4px 16px  rgba(var(--glow),.16);
  --sh-lift:  0 8px 24px  rgba(var(--glow),.32);
  --sh-deal:  0 14px 40px rgba(var(--glow),.22);

  --motif-rot:      -8deg;
  --motif-bullet-w: 22px;
  --motif-bullet-h: 17px;   /* the bow is 1.32:1 — square dims squash it */
  --motif-badge-w:  36px;
  --motif-badge-h:  27px;

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

  --pin-size: 13px;
  --logo-max: 360px;   /* her wordmark is 492px wide at source — past this it softens */

  /* ---- "See My Work" gallery ------------------------------- */
  --ty-card:  #fffcfd;
  --ty-line:  #f8c6d6;
  --ty-icon:  #912449;
  --ty-heart: #e94c81;
}

/* ============================================================
   THE TWO TOUCHES THAT MAKE IT HERS
   ------------------------------------------------------------
   core sets the type roles; these two rules are what turn them
   into the moodboard. Both live here, in her file — nothing was
   added to core for one client.
   ============================================================ */

/* Her headings are italic serif on the moodboard. h2 only:
   .sub sits under them and reads better upright. */
h2{ font-style: italic; }

/* Playfair Display defaults to OLDSTYLE figures, so "$30" comes out with an
   x-height zero and reads as "$3o" — on a price list that is a misread, not
   a nicety, and "August 2026" had it too. font-variant-numeric inherits, so
   one declaration on body fixes prices, the month title, the calendar and
   the deal lines together. Poppins is unaffected; its figures are already
   lining. Caught on the live preview — it never showed locally, because the
   webfont could not load there and the fallback serif hid it. */
body{ font-variant-numeric: lining-nums; }

/* Her name, inflated. logo is null, so h1 IS the wordmark: a
   light-to-deep pink fill with a white rim light above it and a
   pink glow under it, which is what the 3D lettering is doing.
   The flat colour is declared first and the gradient only inside
   @supports, so a browser without background-clip:text shows her
   name in pink rather than showing nothing at all. */
h1{
  color: var(--ribbon);
  font-weight: 800;
  letter-spacing: .005em;
  line-height: 1.05;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  h1{
    background: linear-gradient(#ffb9d2 6%, #f2699b 44%, #cf2f66 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 rgba(255,255,255,.85))
            drop-shadow(0 8px 16px rgba(var(--glow),.32));
  }
}

/* Her tulips, behind the calendar.
   This is a background-image on the card, NOT a ::before — core reserves
   both .card::before and .card::after for its neon-rim layer, and they are
   display:none on any theme that has not set --rim-on. A watermark drawn
   there renders as nothing at all, which is exactly what happened first.

   The fade is baked into cal-tulips.png (11% alpha, palette-quantised to
   35KB) rather than applied in CSS, because opacity on the card would take
   the dates down with it. Held that low so every unbookable date still
   reads over a petal, and so nothing competes with the availability pips —
   they are the one thing on this card that carries meaning. */
#booking .card{
  background-image: url(cal-tulips.png);
  background-repeat: no-repeat;
  background-position: center 62%;
  background-size: min(330px, 62%) auto;
}