/* 冻品询价通 — Design Tokens CSS
   Version: 1.0.0
   Color space: oklch
   Generated from design-tokens.json */

:root {
  /* ===== Color: Primary (深蓝 - 信任) ===== */
  --color-primary-50: #e7f9fd; --color-primary-50: oklch(0.97 0.02 210);
  --color-primary-100: #caf0f7; --color-primary-100: oklch(0.93 0.04 210);
  --color-primary-200: #a0d9e3; --color-primary-200: oklch(0.85 0.06 210);
  --color-primary-300: #6dbcca; --color-primary-300: oklch(0.75 0.08 210);
  --color-primary-400: #2196a7; --color-primary-400: oklch(0.62 0.10 210);
  --color-primary-500: #00798c; --color-primary-500: oklch(0.52 0.11 210);
  --color-primary-600: #006374; --color-primary-600: oklch(0.45 0.10 210);
  --color-primary-700: #004e5d; --color-primary-700: oklch(0.38 0.09 210);
  --color-primary-800: #00353e; --color-primary-800: oklch(0.30 0.06 210);
  --color-primary-900: #001b20; --color-primary-900: oklch(0.20 0.04 210);

  /* ===== Color: Accent (暖橘 - 行动/价格) ===== */
  --color-accent-50: #fff2e9; --color-accent-50: oklch(0.97 0.02 55);
  --color-accent-100: #ffe0c9; --color-accent-100: oklch(0.93 0.05 55);
  --color-accent-200: #fcbf95; --color-accent-200: oklch(0.85 0.09 55);
  --color-accent-300: #e89960; --color-accent-300: oklch(0.75 0.12 55);
  --color-accent-400: #e48233; --color-accent-400: oklch(0.70 0.15 55);
  --color-accent-500: #d3721e; --color-accent-500: oklch(0.65 0.15 55);
  --color-accent-600: #b75f0b; --color-accent-600: oklch(0.58 0.14 55);
  --color-accent-700: #964d09; --color-accent-700: oklch(0.50 0.12 55);
  --color-accent-800: #6f3600; --color-accent-800: oklch(0.40 0.10 55);
  --color-accent-900: #4b2000; --color-accent-900: oklch(0.30 0.08 55);

  /* ===== Color: Neutral (暖灰) ===== */
  --color-neutral-0: #ffffff; --color-neutral-0: oklch(1 0 0);
  --color-neutral-50: #f2f6f8; --color-neutral-50: oklch(0.97 0.005 240);
  --color-neutral-100: #e7ecf0; --color-neutral-100: oklch(0.94 0.008 240);
  --color-neutral-200: #d2d8dd; --color-neutral-200: oklch(0.88 0.01 240);
  --color-neutral-300: #b7bfc5; --color-neutral-300: oklch(0.80 0.012 240);
  --color-neutral-400: #879198; --color-neutral-400: oklch(0.65 0.015 240);
  --color-neutral-500: #5c656b; --color-neutral-500: oklch(0.50 0.015 240);
  --color-neutral-600: #42494e; --color-neutral-600: oklch(0.40 0.012 240);
  --color-neutral-700: #292f32; --color-neutral-700: oklch(0.30 0.01 240);
  --color-neutral-800: #131719; --color-neutral-800: oklch(0.20 0.008 240);
  --color-neutral-900: #060809; --color-neutral-900: oklch(0.13 0.005 240);

  /* ===== Semantic ===== */
  --color-success: #3b9555; --color-success: oklch(0.60 0.13 150);
  --color-success-light: #c8e8cd; --color-success-light: oklch(0.90 0.05 150);
  --color-success-dark: #085023; --color-success-dark: oklch(0.38 0.10 150);
  --color-warning: #dea143; --color-warning: oklch(0.75 0.13 75);
  --color-warning-light: #f9e1c0; --color-warning-light: oklch(0.92 0.05 75);
  --color-warning-dark: #8a5700; --color-warning-dark: oklch(0.50 0.12 75);
  --color-error: #c53637; --color-error: oklch(0.55 0.18 25);
  --color-error-light: #fed2cd; --color-error-light: oklch(0.90 0.05 25);
  --color-error-dark: #861118; --color-error-dark: oklch(0.40 0.15 25);
  --color-info: #4188b6; --color-info: oklch(0.60 0.10 240);
  --color-info-light: #c7e2f6; --color-info-light: oklch(0.90 0.04 240);
  --color-info-dark: #0d4768; --color-info-dark: oklch(0.38 0.08 240);

  /* ===== Surface ===== */
  --color-bg-primary: #f2f6f8; --color-bg-primary: oklch(0.97 0.005 240);
  --color-bg-secondary: #ffffff; --color-bg-secondary: oklch(1 0 0);
  --color-bg-tertiary: #e7ecf0; --color-bg-tertiary: oklch(0.94 0.008 240);
  --color-bg-inverse: #111719; --color-bg-inverse: oklch(0.20 0.01 210);

  /* ===== Text ===== */
  --color-text-primary: #111719; --color-text-primary: oklch(0.20 0.01 210);
  --color-text-secondary: #42494e; --color-text-secondary: oklch(0.40 0.012 240);
  --color-text-tertiary: #6a737a; --color-text-tertiary: oklch(0.55 0.015 240);
  --color-text-inverse: #f2f6f8; --color-text-inverse: oklch(0.97 0.005 240);
  --color-text-price: #006374; --color-text-price: oklch(0.45 0.10 210);
  --color-text-accent: #ad5600; --color-text-accent: oklch(0.55 0.14 55);

  /* ===== Border ===== */
  --color-border-light: #e7ecf0; --color-border-light: oklch(0.94 0.008 240);
  --color-border: #c8cfd4; --color-border: oklch(0.85 0.01 240);
  --color-border-strong: #879198; --color-border-strong: oklch(0.65 0.015 240);

  /* ===== Font ===== */
  --font-heading: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* ===== Font Size ===== */
  --fs-display: 3.052rem;
  --fs-h1: 2.441rem;
  --fs-h2: 1.953rem;
  --fs-h3: 1.563rem;
  --fs-h4: 1.25rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-price: 1.5rem;
  --fs-price-lg: 2rem;

  /* ===== Font Weight ===== */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ===== Line Height ===== */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ===== Letter Spacing ===== */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.025em;
  --ls-wider: 0.05em;

  /* ===== Spacing ===== */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-base: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-4xl: 96px;

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

  /* ===== Shadow ===== */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12);
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.05);

  /* ===== Motion ===== */
  --duration-fast: 100ms;
  --duration-response: 150ms;
  --duration-enter: 200ms;
  --duration-exit: 150ms;
  --duration-slow: 300ms;
  --ease-default: ease-out;
  --ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-exit: ease-in;

  /* ===== Z-Index ===== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ===== Breakpoint ===== */
  --bp-mobile: 375px;
  --bp-tablet: 768px;
  --bp-desktop: 1280px;
  --bp-wide: 1536px;

  /* ===== Touch Target ===== */
  --touch-min: 44px;
  --touch-primary: 56px;
  --touch-camera: 72px;
}

/* ===== Dark Mode ===== */
[data-theme="dark"] {
  --color-bg-primary: #060808; --color-bg-primary: oklch(0.13 0.005 210);
  --color-bg-secondary: #0e1314; --color-bg-secondary: oklch(0.18 0.008 210);
  --color-bg-tertiary: #151c1d; --color-bg-tertiary: oklch(0.22 0.01 210);
  --color-bg-inverse: #f2f6f8; --color-bg-inverse: oklch(0.97 0.005 240);
  --color-text-primary: #f2f6f8; --color-text-primary: oklch(0.97 0.005 240);
  --color-text-secondary: #a7afb5; --color-text-secondary: oklch(0.75 0.012 240);
  --color-text-tertiary: #6a737a; --color-text-tertiary: oklch(0.55 0.015 240);
  --color-text-inverse: #111719; --color-text-inverse: oklch(0.20 0.01 210);
  --color-border-light: #1c2324; --color-border-light: oklch(0.25 0.01 210);
  --color-border: #273031; --color-border: oklch(0.30 0.012 210);
  --color-border-strong: #4c585a; --color-border-strong: oklch(0.45 0.015 210);
}

/* ===== Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-primary-600); text-decoration: none; }
a:hover { color: var(--color-primary-700); }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ===== SVG Icon Base ===== */
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 28px; height: 28px; }
.icon--xl { width: 40px; height: 40px; }
.icon-svg { display: block; }

/* ===== Button Components ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-base);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  border: 1px solid transparent;
  transition: all var(--duration-response) var(--ease-default);
  min-height: var(--touch-min);
  white-space: nowrap;
  text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--color-primary-600); color: var(--color-text-inverse); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-700); }
.btn-secondary { background: var(--color-bg-secondary); color: var(--color-text-primary); border-color: var(--color-border); }
.btn-secondary:hover:not(:disabled) { background: var(--color-bg-tertiary); }
.btn-accent { background: var(--color-accent-500); color: var(--color-text-inverse); }
.btn-accent:hover:not(:disabled) { background: var(--color-accent-600); }
.btn-ghost { background: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--color-bg-tertiary); color: var(--color-text-primary); }
.btn-danger { background: var(--color-error); color: white; }
.btn-danger:hover:not(:disabled) { background: var(--color-error-dark); }
.btn-lg { padding: var(--sp-base) var(--sp-xl); font-size: var(--fs-body-lg); min-height: var(--touch-primary); }
.btn-sm { padding: var(--sp-xs) var(--sp-md); font-size: var(--fs-small); min-height: 36px; }
.btn-block { display: flex; width: 100%; }

/* ===== Input Components ===== */
.input, .textarea, .select {
  width: 100%;
  padding: var(--sp-sm) var(--sp-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-size: var(--fs-body);
  transition: border-color var(--duration-response) var(--ease-default);
  min-height: var(--touch-min);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(49, 108, 165, 0.15);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-tertiary); }

/* ===== Card Components ===== */
.card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-base);
  transition: box-shadow var(--duration-response) var(--ease-default);
}
.card-hover:hover { box-shadow: var(--shadow-md); }
.card-product {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--duration-response) var(--ease-default);
}
.card-product:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card-product__image { aspect-ratio: 1; background: var(--color-bg-tertiary); }
.card-product__body { padding: var(--sp-sm) var(--sp-base) var(--sp-base); }
.card-product__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); margin-bottom: var(--sp-xs); color: var(--color-text-primary); }
.card-product__price { font-family: var(--font-mono); font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--color-text-price); }

/* ===== Tag/Badge ===== */
.tag { display: inline-flex; align-items: center; padding: 2px var(--sp-sm); border-radius: var(--radius-full); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.tag-success { background: var(--color-success-light); color: var(--color-success-dark); }
.tag-warning { background: var(--color-warning-light); color: var(--color-warning-dark); }
.tag-error { background: var(--color-error-light); color: var(--color-error-dark); }
.tag-info { background: var(--color-info-light); color: var(--color-info-dark); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-text-secondary); }

/* ===== Tab Bar (Mobile) ===== */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-light);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: var(--z-fixed);
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-sm) 0;
  color: var(--color-text-tertiary);
  font-size: var(--fs-caption);
  text-decoration: none;
  min-height: var(--touch-min);
  transition: color var(--duration-response) var(--ease-default);
}
.tabbar__item.active { color: var(--color-primary-600); }
.tabbar__icon { margin-bottom: 2px; }

/* ===== Top Bar (Mobile) ===== */
.topbar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  padding: var(--sp-sm) var(--sp-base);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-light);
  padding-top: calc(var(--sp-sm) + env(safe-area-inset-top));
  z-index: var(--z-sticky);
}
.topbar__title { flex: 1; text-align: center; font-size: var(--fs-body); font-weight: var(--fw-semibold); }

/* ===== Price Display ===== */
.price { font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--color-text-price); }
.price--lg { font-size: var(--fs-price-lg); }
.price--md { font-size: var(--fs-price); }
.price--sm { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.price--hidden { color: var(--color-text-tertiary); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body); }

/* ===== Skeleton ===== */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-tertiary) 0%, var(--color-neutral-200) 50%, var(--color-bg-tertiary) 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  padding: var(--sp-sm) var(--sp-base);
  border-radius: var(--radius-lg);
  font-size: var(--fs-small);
  opacity: 0;
  transition: all var(--duration-slow) var(--ease-default);
  z-index: var(--z-toast);
  pointer-events: none;
  max-width: 90%;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Skip Link (a11y) ===== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary-600);
  color: var(--color-text-inverse);
  padding: var(--sp-sm) var(--sp-base);
  z-index: var(--z-tooltip);
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ===== Screen Reader Only (a11y) ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Safe Area ===== */
.safe-area-top { padding-top: env(safe-area-inset-top); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* ===== Modal/Dialog ===== */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-enter) var(--ease-default);
}
.dialog-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
.dialog {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  padding: var(--sp-lg);
  max-width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
}

/* ===== Utility ===== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-small { font-size: var(--fs-small); }
.text-caption { font-size: var(--fs-caption); color: var(--color-text-tertiary); }
.font-mono { font-family: var(--font-mono); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-base); }
.w-full { width: 100%; }
.mt-sm { margin-top: var(--sp-sm); }
.mt-base { margin-top: var(--sp-base); }
.mt-lg { margin-top: var(--sp-lg); }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-base { margin-bottom: var(--sp-base); }
.mb-lg { margin-bottom: var(--sp-lg); }

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}