/* ============================================================
   Baolian Design System — CSS Custom Properties (Design Tokens)
   Version: 2.0.0
   Updated: 2026-04-27
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --color-bg-primary:       #000000;
  --color-bg-secondary:     #0B0B0D;
  --color-bg-elevated:      #111114;
  --color-text-primary:     #FFFFFF;
  --color-text-secondary:   #F4F4F5;
  --color-text-muted:       #D4D4D8;
  --color-accent:           #E50914;
  --color-accent-hover:     #F91A25;
  --color-accent-active:    #CC0812;
  --color-border:           #1F1F23;
  --color-border-light:     #2A2A30;
  --color-overlay:          rgba(0, 0, 0, 0.8);

  /* ── Typography ── */
  --font-en:                'Inter', 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --font-cn:                'Noto Sans SC', 'HarmonyOS Sans', 'PingFang SC', sans-serif;
  --font-mono:              'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Font Sizes (Desktop) */
  --text-h1:                clamp(40px, 5vw, 64px);
  --text-h2:                clamp(28px, 3.5vw, 40px);
  --text-h3:                clamp(20px, 2.5vw, 28px);
  --text-body:              clamp(17px, 1.25vw, 19px);
  --text-small:             clamp(14px, 1.05vw, 15px);
  --text-xs:                13px;

  /* Font Weights */
  --weight-light:           300;
  --weight-regular:         400;
  --weight-medium:          500;

  /* Line Heights */
  --leading-tight:          1.1;
  --leading-snug:           1.2;
  --leading-normal:         1.5;
  --leading-relaxed:        1.6;

  /* Letter Spacing */
  --tracking-tight:         -0.02em;
  --tracking-normal:        0em;
  --tracking-wide:          0.05em;
  --tracking-wider:         0.1em;

  /* ── Spacing Scale (8px base) ── */
  --space-1:                4px;
  --space-2:                8px;
  --space-3:                12px;
  --space-4:                16px;
  --space-5:                20px;
  --space-6:                24px;
  --space-8:                32px;
  --space-10:               40px;
  --space-12:               48px;
  --space-16:               64px;
  --space-20:               80px;
  --space-24:               96px;
  --space-32:               128px;
  --space-40:               160px;

  /* ── Layout ── */
  --container-max:          1440px;
  --container-padding:      24px;
  --gutter:                 24px;
  --section-padding-y:      clamp(80px, 10vw, 160px);

  /* ── Borders & Radius ── */
  --radius-sm:              6px;
  --radius-md:              8px;
  --radius-lg:              12px;
  --radius-xl:              16px;
  --radius-full:            9999px;
  --border-width:           1px;

  /* ── Shadows ── */
  --shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:              0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:              0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow:            0 0 20px rgba(229, 9, 20, 0.15);

  /* ── Transitions ── */
  --ease-default:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:            cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:          150ms;
  --duration-normal:        300ms;
  --duration-slow:          600ms;

  /* ── Z-Index Scale ── */
  --z-base:                 0;
  --z-dropdown:             100;
  --z-sticky:               200;
  --z-header:               300;
  --z-overlay:              400;
  --z-modal:                500;
  --z-toast:                600;
}

/* ── Mobile Overrides ── */
@media (max-width: 767px) {
  :root {
    --container-padding:    16px;
    --gutter:               16px;
  }
}