/* ============================================================
   SALON LEUSDEN — Design tokens
   Strak & modern, Aesop-achtig. Warm wit, hairline goud.
   ============================================================ */

:root {
  /* — Neutrals (warm, low chroma) — */
  --paper:      #FBF9F5;   /* page background, warm white */
  --paper-2:    #F4F0E9;   /* alt section / champagne tint */
  --card:       #FFFFFF;   /* pure white cards */
  --ink:        #1A1714;   /* near-black, warm */
  --ink-2:      #4A443D;   /* secondary text */
  --ink-3:      #8C8377;   /* muted / captions */
  --line:       #E7E1D7;   /* hairline borders */
  --line-2:     #D8D0C2;   /* stronger hairline */

  /* — Gold / champagne accents (low chroma) — */
  --gold:       #9A7B4F;   /* muted gold, primary accent */
  --gold-soft:  #C2A878;   /* lighter champagne */
  --gold-tint:  #F0E9DD;   /* gold wash background */
  --gold-line:  #C9B690;

  /* — Status colors (agenda) — */
  --ok:         #4F7A5B;   /* bevestigd */
  --ok-bg:      #EAF0EB;
  --warn:       #B08544;   /* verplaatst */
  --warn-bg:    #F4ECDD;
  --danger:     #A6534B;   /* geannuleerd */
  --danger-bg:  #F2E6E3;
  --noshow:     #6B6B6B;   /* no-show */
  --noshow-bg:  #ECEAE7;

  /* — Service category accents (soft, desaturated) — */
  --cat-dames:   #B68BA0;
  --cat-heren:   #6E89A6;
  --cat-kinderen:#8AA57E;
  --cat-kleuren: #B58A5E;
  --cat-styling: #A88FB0;
  --cat-behandel:#7FA39C;

  /* — Type — */
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* — Radii — */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* — Shadows (very soft) — */
  --sh-1: 0 1px 2px rgba(26,23,20,0.04), 0 1px 1px rgba(26,23,20,0.03);
  --sh-2: 0 4px 16px rgba(26,23,20,0.06), 0 1px 3px rgba(26,23,20,0.04);
  --sh-3: 0 18px 50px rgba(26,23,20,0.12), 0 4px 14px rgba(26,23,20,0.06);
  --sh-pop: 0 12px 40px rgba(26,23,20,0.16);

  /* — Layout — */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 76px;

  /* — Motion — */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-2: cubic-bezier(0.4, 0, 0.2, 1);
}