/* ==========================================================================
   Brand tokens — Natalyeah Nordberg's Cleaning Services
   Single source of truth for the palette, type and elevation defined in the
   brand kit (/brand-kit/). Do not add colors here that the brand kit does not
   document; the palette is deliberately eight entries plus support tints.
   ========================================================================== */

:root {
  /* Core palette */
  --berry:        #6D0B32;  /* Berry Ink   — script wordmark, headlines, body */
  --hot-pink:     #ED2C8F;  /* Hot Pink    — the signature: buttons, prices   */
  --bubblegum:    #F86FAE;  /* Bubblegum   — sparkles, brush strokes, glow    */
  --blush:        #FBAFD0;  /* Rose Blush  — borders, chips, highlight swipes */
  --petal:        #FDD9E8;  /* Petal       — card fills, panels, dividers     */
  --cloud:        #FFF2F7;  /* Cloud Pink  — page background, never text      */
  --soft-black:   #241018;  /* Soft Black  — outlines, fine print, icon lines */
  --sugar-glow:   linear-gradient(160deg, #FFF2F7 0%, #FBAFD0 45%, #ED2C8F 100%);

  /* Support tints — labels, body copy, paper */
  --label:        #C21273;  /* eyebrow labels, links                          */
  --label-soft:   #A8175C;  /* small caps captions                            */
  --chip-ink:     #8E1547;  /* chip text                                      */
  --ink:          #3E2530;  /* running body copy                              */
  --ink-muted:    #6B4350;  /* captions under specimens                       */
  --paper:        #FFFBFC;  /* near-white card face                           */
  --paper-warm:   #FFF4F9;  /* bottom of the paper gradient                   */

  /* Elevation — all shadows are pink, never neutral grey */
  --lift-sm:      0 8px 20px rgba(237, 44, 143, .2);
  --lift-md:      0 12px 28px rgba(237, 44, 143, .12);
  --lift-lg:      0 14px 34px rgba(237, 44, 143, .13);
  --lift-xl:      0 18px 44px rgba(237, 44, 143, .16);

  /* Radii */
  --r-sm: 12px;
  --r-md: 22px;
  --r-lg: 26px;
  --r-xl: 30px;

  /* Type */
  --script: Yellowtail, "Brush Script MT", cursive;
  --hand:   Caveat, "Segoe Script", cursive;
  --sans:   Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:   ui-monospace, Menlo, Consolas, monospace;

  /* The four-point sparkle, reused everywhere */
  --sparkle-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
}
/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cloud);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; color: var(--berry); line-height: 1.2; }
p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .4em; }

a { color: var(--label); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--berry); }

:focus-visible {
  outline: 3px solid var(--hot-pink);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}