/* ========================================
   超灵智能 - CSS Design Tokens / Variables
   Deep Blue Theme
   ======================================== */

:root {
  /* === Brand Colors (Deep Blue) === */
  --brand-primary: #2563EB;
  --brand-primary-dark: #1D4ED8;
  --brand-primary-darker: #1E3A5F;
  --brand-primary-light: #EFF6FF;
  --brand-gradient: linear-gradient(135deg, #2563EB 0%, #1D4ED8 50%, #1E40AF 100%);
  --brand-glow: rgba(37, 99, 235, 0.3);

  /* === Semantic Colors === */
  --color-teal-bg: #EFF6FF;
  --color-teal-text: #1D4ED8;
  --color-blue-bg: #E0F2FE;
  --color-blue-text: #0369A1;
  --color-purple-bg: #EDE9FE;
  --color-purple-text: #6D28D9;
  --color-amber-bg: #FEF3C7;
  --color-amber-text: #B45309;

  /* === Light Theme (Default) === */
  --color-background-primary: #ffffff;
  --color-background-secondary: #F8FAFC;
  --color-background-tertiary: #F1F5F9;

  --color-text-primary: #0F172A;
  --color-text-secondary: #64748B;
  --color-text-tertiary: #94A3B8;

  --color-border-primary: #CBD5E1;
  --color-border-secondary: #E2E8F0;
  --color-border-tertiary: #F1F5F9;

  /* === Typography === */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;

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

  /* === Border Radius === */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 100px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 8px 32px rgba(15, 23, 42, 0.1);
  --shadow-blue: 0 4px 14px rgba(37, 99, 235, 0.25);

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* === Layout === */
  --max-width: 960px;
  --nav-height: 64px;
}

/* === Dark Theme (Deep Blue) === */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background-primary: #0F172A;
    --color-background-secondary: #1E293B;
    --color-background-tertiary: #0B1120;

    --color-text-primary: #E2E8F0;
    --color-text-secondary: #94A3B8;
    --color-text-tertiary: #64748B;

    --color-border-primary: #334155;
    --color-border-secondary: #1E293B;
    --color-border-tertiary: #1E293B;

    --brand-primary: #3B82F6;
    --brand-primary-dark: #2563EB;
    --brand-primary-darker: #1E3A5F;
    --brand-primary-light: rgba(59, 130, 246, 0.15);
    --brand-glow: rgba(59, 130, 246, 0.2);

    --color-teal-bg: rgba(37, 99, 235, 0.15);
    --color-teal-text: #60A5FA;
    --color-blue-bg: rgba(3, 105, 161, 0.15);
    --color-blue-text: #7DD3FC;
    --color-purple-bg: rgba(109, 40, 217, 0.15);
    --color-purple-text: #A78BFA;
    --color-amber-bg: rgba(180, 83, 9, 0.15);
    --color-amber-text: #FBBF24;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-blue: 0 4px 14px rgba(59, 130, 246, 0.2);
  }
}