/* ============================================
   酒便利官网 - 设计系统 v2.0
   Design System: Obsidian & Warm Amber
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
  /* === Primary Palette: Obsidian === */
  --color-primary:       #0F0F0F;
  --color-primary-light: #1C1C1C;
  --color-primary-mid:   #2D2D2D;
  --color-primary-soft:  #3A3A3A;

  /* === Accent: Warm Amber === */
  --color-accent:        #D4A574;
  --color-accent-light:  #E0BF9E;
  --color-accent-dark:   #B8895A;
  --color-accent-pale:   #F5EDE4;

  /* === Neutrals === */
  --color-white:         #FFFFFF;
  --color-bg:            #F8F6F3;
  --color-bg-warm:       #FAF8F5;
  --color-text:          #2D2D2D;
  --color-text-light:    #666666;
  --color-text-muted:    #999999;
  --color-border:        #E8E5E0;
  --color-divider:       #D9D5CF;

  /* === Semantic === */
  --color-success:       #52C41A;
  --color-warning:       #FAAD14;
  --color-error:         #F5222D;
  --color-info:          #1890FF;

  /* === Footer === */
  --color-footer-bg:     #0A0A0A;
  --color-footer-text:   #AAAAAA;

  /* === Typography === */
  --font-primary:  "方正兰亭黑简体", "Microsoft YaHei", sans-serif;
  --font-display:  "方正兰亭黑简体", "Microsoft YaHei", sans-serif;
  --font-serif:    "方正兰亭黑简体", "Microsoft YaHei", sans-serif;
  --font-mono:     "方正兰亭黑简体", "Microsoft YaHei", sans-serif;

  /* Type Scale (1.2 modular ratio) */
  --text-xs:   0.75rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.3125rem;
  --text-2xl:  1.5625rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.375rem;
  --text-5xl:  3.125rem;
  --text-6xl:  4rem;

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;
  --leading-loose:   2;

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

  /* === 8px Spacing System === */
  --space-0:   0;
  --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-30:  120px;

  /* === Container === */
  --container-max:     1280px;
  --container-padding: 40px;

  /* === Header === */
  --header-height: 64px;

  /* === Easing === */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Duration === */
  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;

  /* === Transitions === */
  --transition-fast:    200ms var(--ease-out-quart);
  --transition-normal:  300ms var(--ease-out-quart);
  --transition-slow:    500ms var(--ease-out-expo);
  --transition-smooth:  400ms var(--ease-out-expo);

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

  /* === Shadows === */
  --shadow-xs:      0 1px 3px rgba(0,0,0,0.04);
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:      0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:      0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl:      0 16px 64px rgba(0,0,0,0.16);
  --shadow-accent:  0 4px 20px rgba(212,165,116,0.25);
  --shadow-card:    0 2px 12px rgba(0,0,0,0.05);
  --shadow-glow:    0 0 30px rgba(212,165,116,0.15);

  /* === Z-index === */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  1050;
  --z-drawer:   1080;
  --z-hamburger: 1100;
  --z-header:   1000;
  --z-sidebar:  900;
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
}

/* --- Container --- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
}

/* --- Typography Components --- */
.section-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
}

.section-title--white {
  color: var(--color-white);
}

.section-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-light);
  text-align: center;
  margin-top: var(--space-4);
  line-height: var(--leading-relaxed);
}

.section-subtitle--white {
  color: rgba(255,255,255,0.7);
}

.accent-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  margin: var(--space-5) auto 0;
}

.accent-line--white {
  background: linear-gradient(90deg, transparent, var(--color-accent-light), transparent);
}

/* --- Section Spacing --- */
.section-padding {
  padding: var(--space-24) 0;
}

.section-padding-lg {
  padding: var(--space-20) 0 var(--space-24);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 36px;
  font-size: 16px;
  font-weight: 500;
  border-radius: var(--radius-full);
  transition: all var(--transition-normal);
  cursor: pointer;
  letter-spacing: 1px;
  font-family: var(--font-primary);
}

.btn--primary {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: var(--color-white);
  box-shadow: var(--shadow-accent);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent-dark));
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(212,165,116,0.4);
}

.btn--outline {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
}

.btn--outline:hover {
  background: var(--color-accent);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn--ghost {
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--color-white);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

.btn--white {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.btn--white:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--sm {
  padding: 8px 20px;
  font-size: var(--text-sm);
}

.btn--lg {
  padding: 16px 48px;
  font-size: var(--text-lg);
}

/* --- Cards --- */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-normal);
  overflow: hidden;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.card--dark {
  background: var(--color-primary-light);
  color: var(--color-white);
}

.card--glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
}

.card--border {
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.card--border:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-accent);
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.badge--accent {
  background: var(--color-accent-pale);
  color: var(--color-accent-dark);
}

.badge--dark {
  background: rgba(0,0,0,0.06);
  color: var(--color-text);
}

/* --- Tags --- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  color: var(--color-text);
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.tag:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

/* --- Section Header --- */
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-header .section-title {
  margin-bottom: var(--space-2);
}

/* --- Utility Classes --- */
.text-center { text-align: center; }
.text-accent { color: var(--color-accent); }
.text-dark    { color: var(--color-primary); }
.text-muted   { color: var(--color-text-muted); }
.text-light   { color: var(--color-text-light); }

.bg-dark { background-color: var(--color-primary); }
.bg-warm { background-color: var(--color-bg-warm); }
.bg-gray { background-color: var(--color-bg); }

.mt-sm  { margin-top: var(--space-2); }
.mt-md  { margin-top: var(--space-4); }
.mt-lg  { margin-top: var(--space-6); }
.mt-xl  { margin-top: var(--space-8); }
.mt-2xl { margin-top: var(--space-12); }
.mt-3xl { margin-top: var(--space-16); }

.mb-sm  { margin-bottom: var(--space-2); }
.mb-md  { margin-bottom: var(--space-4); }
.mb-lg  { margin-bottom: var(--space-6); }
.mb-xl  { margin-bottom: var(--space-8); }
.mb-2xl { margin-bottom: var(--space-12); }
.mb-3xl { margin-bottom: var(--space-16); }

/* --- Content Image Styling --- */
.page-content img,
.intro-image img,
.news-card img {
  transition: transform var(--transition-slow), filter var(--transition-normal);
}

.page-content img:hover,
.intro-image img:hover,
.news-card img:hover {
  transform: scale(1.03);
}

/* --- Scroll Animations --- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}

.fade-in-scale.visible {
  opacity: 1;
  transform: scale(1);
}

.slide-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for child elements */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.stagger > *:nth-child(3) { transition-delay: 0.2s; }
.stagger > *:nth-child(4) { transition-delay: 0.3s; }
.stagger > *:nth-child(5) { transition-delay: 0.4s; }
.stagger > *:nth-child(6) { transition-delay: 0.5s; }

/* --- Selection --- */
::selection {
  background: var(--color-accent);
  color: var(--color-white);
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-dark);
}

/* --- Focus Visible --- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* --- Loading Skeleton --- */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg) 25%, var(--color-bg-warm) 50%, var(--color-bg) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Bounce Arrow --- */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
  40% { transform: translateY(-8px) translateX(-50%); }
  60% { transform: translateY(-4px) translateX(-50%); }
}

/* --- Pulse Glow --- */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,165,116,0.4); }
  50% { box-shadow: 0 0 0 10px rgba(212,165,116,0); }
}