/* ==========================================================================
   Design Tokens & CSS Variables - 南京彤乐仪器科技风格设计系统
   ========================================================================== */

:root {
  /* Brand Tech Colors */
  --color-primary: #2563eb;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1d4ed8;
  --color-primary-glow: rgba(37, 99, 235, 0.4);

  --color-cyan: #06b6d4;
  --color-cyan-light: #22d3ee;
  --color-cyan-dark: #0891b2;
  --color-cyan-glow: rgba(6, 182, 212, 0.35);

  --color-emerald: #10b981;
  --color-emerald-light: #34d399;
  --color-emerald-glow: rgba(16, 185, 129, 0.3);

  --color-purple: #8b5cf6;
  --color-purple-glow: rgba(139, 92, 246, 0.3);

  /* Deep Space Dark Theme (Hero, Stats, Footer, Dark Cards) */
  --bg-space-deep: #060913;
  --bg-space-dark: #0a0f1d;
  --bg-space-card: #0f172a;
  --bg-space-card-hover: #1e293b;
  --bg-space-glass: rgba(15, 23, 42, 0.75);

  /* Light Theme (Content sections, clean lab atmosphere) */
  --bg-light: #f8fafc;
  --bg-light-alt: #f1f5f9;
  --bg-white: #ffffff;
  --bg-card-light: #ffffff;
  --bg-card-light-hover: #f8fafc;

  /* Text Colors */
  --text-dark-primary: #0f172a;
  --text-dark-secondary: #475569;
  --text-dark-muted: #64748b;
  --text-dark-light: #94a3b8;

  --text-light-primary: #f8fafc;
  --text-light-secondary: #cbd5e1;
  --text-light-muted: #94a3b8;
  --text-cyan: #22d3ee;

  /* Borders & Dividers */
  --border-light: #e2e8f0;
  --border-light-hover: #cbd5e1;
  --border-dark: rgba(255, 255, 255, 0.08);
  --border-tech: rgba(56, 189, 248, 0.2);
  --border-tech-hover: rgba(56, 189, 248, 0.6);

  /* Gradients */
  --gradient-tech: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  --gradient-tech-hover: linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%);
  --gradient-cyan-emerald: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
  --gradient-hero: radial-gradient(circle at 50% 20%, #1e293b 0%, #0a0f1d 70%, #060913 100%);
  --gradient-card-dark: linear-gradient(180deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.85) 100%);
  --gradient-glow: linear-gradient(90deg, rgba(37,99,235,0.15) 0%, rgba(6,182,212,0.2) 50%, rgba(16,185,129,0.15) 100%);
  --gradient-text: linear-gradient(135deg, #ffffff 30%, #38bdf8 100%);

  /* Shadows & Glows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-tech-glow: 0 0 25px rgba(6, 182, 212, 0.25);
  --shadow-primary-glow: 0 0 25px rgba(37, 99, 235, 0.35);
  --shadow-card-hover: 0 20px 35px -10px rgba(15, 23, 42, 0.15), 0 0 15px rgba(6, 182, 212, 0.12);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;

  /* Layout Dimensions */
  --container-max-width: 1320px;
  --header-height: 76px;
  --header-height-scrolled: 68px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}