/* ============================================
   tokens.css — Mercury Design Tokens for 海广商城
   ============================================ */

:root {
  /* ── Color: Warm Neutral Palette ── */
  --color-primary:       #2A2924;
  --color-secondary:     #5A5548;
  --color-accent:        #5266EB;
  --color-accent-hover:  #3D4FD9;
  --color-accent-light:  rgba(82, 102, 235, 0.08);

  /* Surfaces */
  --color-bg:            #FCFCFA;
  --color-bg-alt:        #F6F5F2;
  --color-card:          #FFFFFF;
  --color-overlay:       rgba(42, 41, 36, 0.6);

  /* Glassmorphism */
  --glass-bg:            rgba(112, 115, 147, 0.1);
  --glass-blur:          20px;

  /* Hero gradient */
  --gradient-hero:       linear-gradient(165deg, #F6F5F2 0%, #FCFCFA 40%, #EDE9E3 100%);

  /* ── Typography ── */
  --font-heading:        'DM Sans', sans-serif;
  --font-body:           'Inter', sans-serif;

  --text-display:        clamp(2.5rem, 5vw + 1rem, 4.125rem);
  --text-h2:             clamp(1.75rem, 3vw + 0.5rem, 3rem);
  --text-h3:             clamp(1.25rem, 2vw + 0.25rem, 1.5rem);
  --text-body-lg:        clamp(1.125rem, 1.5vw, 1.5rem);
  --text-body:           1rem;
  --text-small:          0.875rem;
  --text-caption:        0.75rem;

  --weight-normal:       400;
  --weight-medium:       480;
  --weight-heading:      500;

  --leading-tight:       1.1;
  --leading-snug:        1.25;
  --leading-normal:      1.6;

  /* ── Spacing (8px base) ── */
  --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 */

  /* ── Layout ── */
  --max-width:           1728px;
  --content-width:       1200px;
  --gutter:              2rem;
  --nav-height:          72px;

  /* ── Shape ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 40px;

  /* ── Elevation ── */
  --shadow-low:    0 0 3px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 10px 16px rgba(28, 28, 35, 0.02),
                   0 6px 10px rgba(28, 28, 35, 0.04),
                   0 0 3px rgba(28, 28, 35, 0.09);
  --shadow-high:   0 0 3px rgba(0, 0, 0, 0.05),
                   0 8px 12px rgba(0, 0, 0, 0.05),
                   0 12px 20px rgba(0, 0, 0, 0.05);

  /* ── Motion ── */
  --ease-mercury:    cubic-bezier(0, 0, 0.2, 1);
  --duration-micro:  150ms;
  --duration-normal: 300ms;
  --duration-macro:  500ms;
}