/* ============================================
   NAILONG NAILS — Design Tokens
   奶龙爱美甲 CSS 变量系统
   ============================================ */

:root {
  /* ── Colors ── */
  --color-bg:          #FDFAF7;   /* 奶油白背景 */
  --color-bg-soft:     #F8F4F0;   /* 柔和米色区块 */
  --color-bg-rose:     #FEF6F4;   /* 淡粉区块 */
  --color-surface:     #FFFFFF;
  --color-border:      #E8E0D8;
  --color-border-soft: #F0EBE5;

  --color-text:        #1A1714;   /* 主文字：深棕黑 */
  --color-text-muted:  #6B5E54;   /* 次要文字 */
  --color-text-light:  #9E8F85;   /* 辅助文字 */
  --color-text-xlight: #C4B5AD;   /* 占位/禁用 */

  --color-primary:     #1A1714;   /* 主色（按钮/强调）*/
  --color-primary-fg:  #FFFFFF;

  --color-accent:      #D4998A;   /* 强调色：裸粉玫瑰 */
  --color-accent-soft: #EDD5CC;   /* 淡强调 */
  --color-accent-fg:   #FFFFFF;

  --color-sale:        #B85C50;   /* 促销/折扣色 */
  --color-new:         #5B7FA6;   /* 新品标签色 */
  --color-best:        #A07855;   /* 热卖标签色 */

  --color-success:     #5E8C6A;
  --color-warning:     #C4945A;
  --color-error:       #B85C50;

  /* ── Typography ── */
  --font-serif:   'Playfair Display', 'Noto Serif SC', Georgia, serif;
  --font-sans:    'Inter', 'PingFang SC', 'Noto Sans SC', -apple-system, sans-serif;
  --font-display: var(--font-serif);

  --text-xs:   0.688rem;  /* 11px */
  --text-sm:   0.813rem;  /* 13px */
  --text-base: 0.938rem;  /* 15px */
  --text-md:   1.063rem;  /* 17px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  2rem;      /* 32px */
  --text-3xl:  2.75rem;   /* 44px */
  --text-4xl:  3.75rem;   /* 60px */
  --text-5xl:  5rem;      /* 80px */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.2em;

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

  /* ── Spacing ── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 3px rgba(26,23,20,.06);
  --shadow-sm:  0 2px 8px rgba(26,23,20,.08);
  --shadow-md:  0 4px 20px rgba(26,23,20,.10);
  --shadow-lg:  0 8px 40px rgba(26,23,20,.12);
  --shadow-xl:  0 20px 60px rgba(26,23,20,.16);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-drawer: 280ms cubic-bezier(.4,0,.2,1);

  /* ── Layout ── */
  --container-max: 1440px;
  --container-wide: 1280px;
  --container-md:   960px;
  --container-sm:   680px;
  --gutter:         clamp(1rem, 4vw, 2.5rem);

  /* ── Z-index ── */
  --z-base:       0;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-drawer:     400;
  --z-modal:      500;
  --z-toast:      600;

  /* ── Header ── */
  --header-height:         64px;
  --announcement-height:   40px;

  /* ── Product Card ── */
  --card-aspect:   4 / 5;
  --card-gap:      clamp(0.75rem, 2vw, 1.25rem);
}

/* Dark-mode placeholder (off by default) */
@media (prefers-color-scheme: dark) {
  /* TODO: add dark palette if needed */
}