/* ==========================================================================
   Pawsitive Salon — Design Tokens
   Derived from the brand illustration: honey-gold splatter, warm cream,
   near-black ink (the uniforms/outlines), and the rainbow wordmark as the
   one celebratory signature. Change a value here; it updates everywhere.
   ========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------- */
  --ink:        #171d25;   /* primary text + dark fields (matches outlines)  */
  --ink-soft:   #4a505a;   /* secondary text                                 */
  --ink-faint:  #8a8f97;   /* captions, meta                                 */

  --paper:      #fdf7ec;   /* page background — warm cream                    */
  --surface:    #ffffff;   /* cards, panels                                  */
  --cream:      #f7eddc;   /* tinted surface / section bands                 */

  --gold:       #e7ab6a;   /* brand honey-gold (the splatter)                */
  --gold-deep:  #cf8f45;   /* deeper gold for accents/hover                  */
  --gold-soft:  #fbe6cf;   /* soft gold wash                                 */

  --tang:       #ec6a2e;   /* primary action / accent (warm tangerine)       */
  --tang-deep:  #cf551c;   /* action hover / readable accent text            */
  --tang-soft:  #fde0d0;   /* accent fill                                    */

  --blue:       #2e9be6;   /* logo-outline blue — used very sparingly        */

  /* Rainbow wordmark stops + the signature gradient */
  --rb-red:    #ff4d4d;
  --rb-orange: #ff8a1e;
  --rb-yellow: #ffcf3f;
  --rb-green:  #3fbf6a;
  --rb-blue:   #2e9be6;
  --rb-violet: #8b6cf0;
  --rainbow: linear-gradient(90deg,
    var(--rb-red), var(--rb-orange), var(--rb-yellow),
    var(--rb-green), var(--rb-blue), var(--rb-violet));

  --line:        rgba(23, 29, 37, 0.12);
  --line-strong: rgba(23, 29, 37, 0.22);

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.92rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.27rem + 0.85vw, 2rem);
  --step-3:  clamp(1.73rem, 1.46rem + 1.36vw, 2.67rem);
  --step-4:  clamp(2.07rem, 1.65rem + 2.1vw, 3.55rem);
  --step-5:  clamp(2.49rem, 1.84rem + 3.25vw, 4.74rem);

  /* --- Spacing (8px rhythm) --------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  /* --- Shape: soft, friendly radii -------------------------------------- */
  --radius-s:    10px;
  --radius:      18px;
  --radius-l:    28px;
  --radius-xl:   40px;
  --radius-pill: 999px;

  /* --- Soft, warm-tinted shadows ---------------------------------------- */
  --shadow-s:  0 1px 2px rgba(23, 29, 37, 0.06), 0 2px 6px rgba(23, 29, 37, 0.05);
  --shadow-m:  0 4px 12px rgba(23, 29, 37, 0.08), 0 12px 28px rgba(23, 29, 37, 0.07);
  --shadow-l:  0 10px 24px rgba(207, 143, 69, 0.18), 0 24px 60px rgba(23, 29, 37, 0.12);

  /* --- Layout ----------------------------------------------------------- */
  --container: 1140px;
  --container-narrow: 760px;
  --header-h: 76px;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.45s;
}