/* ============================================================
   Vanille Kosmetik — Design Tokens
   Warm spa-soft brand system: ivory → cocoa neutrals, soft
   rounded shapes, diffuse warm shadows, calm motion.
   Sampled from the studio's flyers & price lists.
   ============================================================ */

/* ---- Webfonts (Google Fonts substitutes for the licensed print fonts) ----
   Pinyon Script ~ "Vanille" wordmark · Sacramento ~ signature flourishes
   Montserrat ~ body / UI / headings. Swap when the originals arrive. */
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Sacramento&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---- Base ramp: warm neutrals (ivory → cocoa) ---- */
  --vk-ivory-50:  #FDFBF7;
  --vk-ivory-100: #FBF7F1;
  --vk-cream-200: #F6EEE2;
  --vk-sand-300:  #EBDDC9;
  --vk-sand-400:  #DEC9AC;
  --vk-tan-500:   #CBA77E;
  --vk-tan-600:   #B58A5C;
  --vk-cocoa-700: #8A5A36;
  --vk-cocoa-800: #6B4327;
  --vk-cocoa-900: #4A3322;

  /* ---- Warm grey ---- */
  --vk-stone-300: #D8CDBE;
  --vk-stone-400: #B6A893;
  --vk-stone-500: #8C7B6B;

  /* ---- Support / status (muted, brand-warm) ---- */
  --vk-success:   #6E8B5B;
  --vk-error:     #B5524A;
  --vk-info:      #7E94A6;
  --vk-gold:      #C9A24B;

  --vk-white:     #FFFFFF;
  --vk-black:     #2B2118;

  /* ---- Semantic: surfaces ---- */
  --surface-page:        var(--vk-ivory-100);
  --surface-page-alt:    var(--vk-cream-200);
  --surface-card:        var(--vk-white);
  --surface-raised:      var(--vk-white);
  --surface-sunken:      var(--vk-cream-200);
  --surface-accent-soft: var(--vk-sand-300);
  --surface-inverse:     var(--vk-cocoa-800);

  /* ---- Semantic: text ---- */
  --text-strong:    var(--vk-cocoa-900);
  --text-heading:   var(--vk-cocoa-800);
  --text-body:      var(--vk-cocoa-900);
  --text-muted:     var(--vk-stone-500);
  --text-on-accent: var(--vk-white);
  --text-on-dark:   var(--vk-ivory-50);
  --text-brand:     var(--vk-cocoa-700);

  /* ---- Semantic: brand / interactive ---- */
  --brand:        var(--vk-cocoa-700);
  --brand-hover:  var(--vk-cocoa-800);
  --brand-press:  var(--vk-cocoa-900);
  --brand-soft:   var(--vk-sand-300);
  --accent:       var(--vk-tan-500);
  --accent-hover: var(--vk-tan-600);
  --price:        var(--vk-cocoa-700);

  /* ---- Semantic: borders ---- */
  --border-subtle:  var(--vk-sand-300);
  --border-default: var(--vk-stone-300);
  --border-strong:  var(--vk-stone-400);
  --ring:           color-mix(in srgb, var(--vk-tan-500) 55%, transparent);

  /* ---- Status ---- */
  --status-success: var(--vk-success);
  --status-error:   var(--vk-error);
  --status-info:    var(--vk-info);

  /* ---- Type families ---- */
  --font-script: 'Pinyon Script', 'Segoe Script', cursive;
  --font-hand:   'Sacramento', 'Brush Script MT', cursive;
  --font-sans:   'Montserrat', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:   var(--font-sans);

  /* ---- Type scale ---- */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   21px;
  --text-xl:   26px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  52px;
  --text-5xl:  66px;
  --text-display: 88px;

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Line heights ---- */
  --leading-tight:   1.1;
  --leading-snug:    1.28;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.22em;

  /* ---- Spacing scale (4px base) ---- */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;  --space-4:  16px;
  --space-5:  20px;  --space-6:  24px;  --space-8:  32px;  --space-10: 40px;
  --space-12: 48px;  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;
  --radius-blob: 46% 54% 58% 42% / 52% 44% 56% 48%;

  /* ---- Shadows (warm-tinted, soft, diffuse) ---- */
  --shadow-xs:  0 1px 2px rgba(74, 51, 34, 0.06);
  --shadow-sm:  0 2px 8px rgba(74, 51, 34, 0.07);
  --shadow-md:  0 6px 20px rgba(74, 51, 34, 0.09);
  --shadow-lg:  0 14px 38px rgba(74, 51, 34, 0.12);
  --shadow-xl:  0 28px 64px rgba(74, 51, 34, 0.16);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---- Layout ---- */
  --container: 1140px;

  /* ---- Motion (calm, no bounce) ---- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.25, 0.95);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --transition-base: all var(--dur-base) var(--ease-out);
}