/* ============================================
   藏甄膳官网 - CSS 设计令牌系统
   Design Tokens / CSS Custom Properties
   ============================================ */

:root {
  /* ===== 品牌主色调（藏文化棕金色系）===== */
  --color-primary:         #B8860B;
  --color-primary-dark:    #8B6508;
  --color-primary-light:   #DAA520;
  --color-primary-bg:      #FFF8DC;
  --color-primary-gradient: linear-gradient(135deg, #B8860B 0%, #DAA520 100%);

  /* ===== 辅助色 ===== */
  --color-secondary:       #2E4053;
  --color-secondary-light: #3D566E;
  --color-secondary-bg:    #F0F4F8;

  /* ===== 功能色 ===== */
  --color-success:         #27AE60;
  --color-warning:         #F39C12;
  --color-error:           #E74C3C;
  --color-info:            #3498DB;

  /* ===== 中性色 ===== */
  --color-white:           #FFFFFF;
  --color-gray-50:         #FAFAFA;
  --color-gray-100:        #F5F5F5;
  --color-gray-200:        #EEEEEE;
  --color-gray-300:        #D4D4D4;
  --color-gray-400:        #A3A3A3;
  --color-gray-500:        #737373;
  --color-gray-600:        #525252;
  --color-gray-700:        #404040;
  --color-gray-800:        #262626;
  --color-gray-900:        #171717;
  --color-black:           #0A0A0A;

  /* ===== 文字颜色 ===== */
  --text-primary:          #1A1A1A;
  --text-secondary:        #525252;
  --text-muted:            #737373;
  --text-on-primary:       #FFFFFF;
  --text-on-dark:          #FFFFFF;
  --text-link:             #B8860B;
  --text-link-hover:       #8B6508;
  --text-inverse:          #FFFFFF;

  /* ===== 字体系统 ===== */
  --font-family-base:      -apple-system, BlinkMacSystemFont, 'PingFang SC',
                            'Hiragino Sans GB', 'Microsoft YaHei',
                            'Noto Sans SC', sans-serif;
  --font-family-heading:   'Noto Serif SC', 'STSong', 'SimSun', 'Songti SC',
                            'Source Han Serif SC', serif;
  --font-family-number:    'DIN Alternate', 'Helvetica Neue', Helvetica,
                            Arial, sans-serif;

  /* ===== 字体大小 - 流体排版 ===== */
  --text-xs:               clamp(0.75rem, 0.9vw + 0.5rem, 0.875rem);
  --text-sm:               clamp(0.8125rem, 1vw + 0.5rem, 0.9375rem);
  --text-base:             clamp(0.9375rem, 1.2vw + 0.5rem, 1.0625rem);
  --text-lg:               clamp(1.0625rem, 1.5vw + 0.5rem, 1.25rem);
  --text-xl:               clamp(1.25rem, 2vw + 0.5rem, 1.5rem);
  --text-2xl:              clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
  --text-3xl:              clamp(1.875rem, 3vw + 0.5rem, 2.5rem);
  --text-4xl:              clamp(2.25rem, 4vw + 0.5rem, 3.5rem);
  --text-5xl:              clamp(2.75rem, 5vw + 1rem, 4.5rem);

  /* ===== 字重 ===== */
  --font-normal:           400;
  --font-medium:           500;
  --font-semibold:         600;
  --font-bold:             700;
  --font-extrabold:        800;

  /* ===== 行高 ===== */
  --leading-tight:         1.2;
  --leading-snug:          1.35;
  --leading-normal:        1.6;
  --leading-relaxed:       1.75;
  --leading-loose:         2;

  /* ===== 间距系统（基于 8px 网格）===== */
  --space-0:               0;
  --space-1:               0.5rem;     /* 8px */
  --space-2:               1rem;       /* 16px */
  --space-3:               1.5rem;     /* 24px */
  --space-4:               2rem;       /* 32px */
  --space-5:               3rem;       /* 48px */
  --space-6:               4rem;       /* 64px */
  --space-8:               6rem;       /* 96px */
  --space-10:              8rem;       /* 128px */
  --space-12:              10rem;      /* 160px */

  /* ===== 圆角 ===== */
  --radius-none:           0;
  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             12px;
  --radius-xl:             16px;
  --radius-2xl:            24px;
  --radius-full:           9999px;

  /* ===== 阴影 ===== */
  --shadow-xs:             0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:             0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:             0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:             0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl:             0 12px 48px rgba(0,0,0,0.15);
  --shadow-primary:        0 4px 14px rgba(184,134,11,0.3);

  /* ===== 过渡动画 ===== */
  --transition-fast:       150ms ease;
  --transition-normal:     300ms ease;
  --transition-slow:       500ms ease;
  --transition-bounce:     500ms cubic-bezier(0.68,-0.55,0.265,1.55);

  /* ===== 层级 z-index ===== */
  --z-dropdown:            100;
  --z-sticky:              200;
  --z-fixed:               300;
  --z-modal-backdrop:      400;
  --z-modal:               500;
  --z-popover:             600;
  --z-tooltip:             700;

  /* ===== 布局尺寸 ===== */
  --max-width:             1200px;
  --max-width-narrow:      900px;
  --header-height:         72px;
  --header-height-mobile:  60px;
  --sidebar-width:         280px;

  /* ===== 容器内边距 ===== */
  --container-padding-x:   var(--space-4);
}