/* ==========================================================================
   MyKibbe Design Tokens  (v1.0)
   Based on 07_MyKibbe_UI_Design_System.md
   ========================================================================== */

:root {
  /* -------- Primary palette -------- */
  --mk-rose:        #C48B9F;   /* primary */
  --mk-rose-50:     #FAF0F3;
  --mk-rose-100:    #F3E4E9;
  --mk-rose-200:    #E6C8D1;
  --mk-rose-300:    #D9ABB9;
  --mk-rose-400:    #C48B9F;
  --mk-rose-500:    #A67B8A;   /* mauve */
  --mk-rose-600:    #8A6471;
  --mk-rose-700:    #6E4F5A;
  --mk-rose-800:    #523A43;
  --mk-rose-900:    #36252C;

  --mk-ivory:       #F9F4ED;   /* base background */
  --mk-ivory-50:    #FDFAF5;
  --mk-ivory-200:   #F1E6D2;   /* champagne */
  --mk-ivory-300:   #E4DCD0;
  --mk-ivory-400:   #D7D0C8;

  --mk-ink:         #1A1A1A;   /* primary text */
  --mk-ink-50:      #FAFAF7;
  --mk-ink-100:     #F2EEE8;
  --mk-ink-300:     #C8BEB0;
  --mk-ink-500:     #706654;
  --mk-ink-700:     #3A3329;
  --mk-ink-900:     #1A1A1A;

  --mk-gold:        #B08D57;   /* antique gold accent */
  --mk-gold-light:  #C9A878;
  --mk-gold-dark:   #8A6D42;

  --mk-sage:        #8FA68E;

  /* -------- Semantic -------- */
  --mk-success:     #7A9B76;
  --mk-warning:     #D4A574;
  --mk-error:       #B8655A;
  --mk-info:        #8598B0;

  /* -------- Backgrounds -------- */
  --mk-bg:          var(--mk-ivory);
  --mk-bg-alt:      var(--mk-rose-100);
  --mk-bg-soft:     var(--mk-ivory-200);
  --mk-surface:     #FFFFFF;

  /* -------- Foregrounds -------- */
  --mk-fg:          var(--mk-ink);
  --mk-fg-muted:    var(--mk-ink-500);
  --mk-fg-subtle:   var(--mk-ink-300);
  --mk-fg-inverse:  var(--mk-ivory);

  /* -------- Borders & Dividers -------- */
  --mk-border:      var(--mk-ivory-300);
  --mk-border-soft: var(--mk-ivory-400);
  --mk-divider:     var(--mk-ivory-400);

  /* -------- Typography -------- */
  --mk-font-display: 'Editorial New', 'Canela', 'Playfair Display', Georgia, serif;
  --mk-font-serif:   'Source Serif Pro', 'Lora', Georgia, serif;
  --mk-font-sans:    'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, sans-serif;
  --mk-font-accent:  'Italiana', 'Cormorant Garamond', serif;

  --mk-fs-display-xl: clamp(44px, 6vw, 72px);
  --mk-fs-display-l:  clamp(36px, 5vw, 56px);
  --mk-fs-h1:         clamp(32px, 4vw, 44px);
  --mk-fs-h2:         clamp(28px, 3.2vw, 36px);
  --mk-fs-h3:         clamp(22px, 2.5vw, 28px);
  --mk-fs-h4:         22px;
  --mk-fs-body-l:     18px;
  --mk-fs-body:       16px;
  --mk-fs-body-s:     14px;
  --mk-fs-caption:    12px;
  --mk-fs-label:      11px;

  --mk-lh-tight:  1.1;
  --mk-lh-snug:   1.25;
  --mk-lh-normal: 1.5;
  --mk-lh-relaxed:1.7;

  --mk-fw-normal:   400;
  --mk-fw-medium:   500;
  --mk-fw-semibold: 600;
  --mk-fw-bold:     700;

  /* -------- Spacing (8px grid) -------- */
  --mk-sp-1:  4px;
  --mk-sp-2:  8px;
  --mk-sp-3:  12px;
  --mk-sp-4:  16px;
  --mk-sp-5:  24px;
  --mk-sp-6:  32px;
  --mk-sp-8:  48px;
  --mk-sp-10: 64px;
  --mk-sp-12: 96px;
  --mk-sp-16: 128px;

  /* -------- Container -------- */
  --mk-container-sm:  640px;
  --mk-container-md:  768px;
  --mk-container-lg:  1024px;
  --mk-container-xl:  1200px;
  --mk-container-2xl: 1400px;

  /* -------- Radius -------- */
  --mk-radius-sm:   4px;
  --mk-radius-md:   8px;
  --mk-radius-lg:   16px;
  --mk-radius-xl:   24px;
  --mk-radius-full: 9999px;

  /* -------- Shadows -------- */
  --mk-shadow-soft:  0 1px 3px rgba(26,26,26,0.04), 0 8px 24px rgba(26,26,26,0.06);
  --mk-shadow-rose:  0 8px 24px rgba(196,139,159,0.25);
  --mk-shadow-gold:  0 8px 24px rgba(176,141,87,0.20);
  --mk-shadow-lg:    0 12px 40px rgba(26,26,26,0.10);

  /* -------- Easing -------- */
  --mk-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --mk-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --mk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -------- Gradients -------- */
  --mk-grad-dawn:   linear-gradient(135deg, #F9F4ED 0%, #F3E4E9 50%, #F1E6D2 100%);
  --mk-grad-rose:   linear-gradient(135deg, #C48B9F 0%, #B08D57 100%);
  --mk-grad-sunset: linear-gradient(180deg, #F3E4E9 0%, #F9F4ED 100%);
}