/* ============================================
   XIUKEAI — CSS Design Tokens
   ============================================ */

:root {
  /* Brand Colors */
  --color-black:     #000000;
  --color-white:     #FFFFFF;
  --color-red:       #FF3B30;
  --color-red-dark:  #CC2E25;
  --color-red-light: #FF6B63;

  /* Neutral Scale */
  --color-gray-100:  #F5F5F7;
  --color-gray-200:  #E8E8ED;
  --color-gray-300:  #D2D2D7;
  --color-gray-500:  #86868B;
  --color-gray-700:  #424245;
  --color-gray-900:  #1D1D1F;

  /* Typography */
  --font-display:    'Playfair Display', 'Noto Serif SC', serif;
  --font-body:       'Noto Sans SC', 'PingFang SC', -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', monospace;

  /* Font Sizes — fluid scale */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   2rem;       /* 32px */
  --text-4xl:   2.5rem;     /* 40px */
  --text-5xl:   3.5rem;     /* 56px */
  --text-6xl:   5rem;       /* 80px */
  --text-hero:  clamp(3rem, 8vw, 7rem);

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Layout */
  --max-width:       1200px;
  --nav-height:      64px;
  --section-padding: clamp(4rem, 8vw, 8rem);

  /* Transitions */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-slower: 1000ms;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.12);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.16);
  --shadow-xl:  0 16px 64px rgba(0,0,0,0.20);

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

  /* Z-index */
  --z-base:    0;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}