/* ============================================================
   Design Tokens — Daily News
   统一 CSS 变量，所有页面共享
   ============================================================ */

:root {
  /* ---- Color: Brand ---- */
  --color-primary:        #2D6A4F;
  --color-primary-light:  #3d8b68;
  --color-primary-dark:   #1e4a35;

  /* ---- Color: Surface ---- */
  --color-bg:             #FAFAF8;
  --color-bg-header:      rgba(250, 250, 248, 0.85);
  --color-card:           #ffffff;
  --color-card-hover:     #f9fafb;
  --color-card-border:    #e5e7eb;

  /* ---- Color: Text ---- */
  --color-text:           #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-muted:     #999999;
  --color-text-inverse:   #ffffff;

  /* ---- Color: Tag Category (background + text pairs) ---- */
  --color-tag-ai-bg:         #D8F3DC;
  --color-tag-ai-text:       #1B4332;
  --color-tag-tech-bg:       #DBEAFE;
  --color-tag-tech-text:     #1E40AF;
  --color-tag-finance-bg:    #FEE2E2;
  --color-tag-finance-text:  #991B1B;
  --color-tag-policy-bg:     #FEF3C7;
  --color-tag-policy-text:   #92400E;
  --color-tag-intl-bg:       #EDE9FE;
  --color-tag-intl-text:     #5B21B6;
  --color-tag-product-bg:    #FCE7F3;
  --color-tag-product-text:  #9D174D;
  --color-tag-consumer-bg:   #CCFBF1;
  --color-tag-consumer-text: #115E59;
  --color-tag-chip-bg:       #E0E7FF;
  --color-tag-chip-text:     #3730A3;
  --color-tag-enterprise-bg: #FCE7F3;
  --color-tag-enterprise-text: #9D174D;
  --color-tag-robotics-bg:   #ECFDF5;
  --color-tag-robotics-text: #065F46;
      --color-tag-research-bg:   #EDE7F6;
      --color-tag-research-text: #4527A0;
      --color-tag-security-bg:  #FFEBEE;
      --color-tag-security-text:#B71C1C;
      --color-tag-agent-bg:     #E8F4FD;
      --color-tag-agent-text:   #0D47A1;
      --color-tag-infra-bg:     #F1F8E9;
      --color-tag-infra-text:   #33691E;
      --color-tag-open-bg:      #FFF9C4;
      --color-tag-open-text:    #795548;
      --color-tag-model-bg:     #E5E7EB;
      --color-tag-model-text:   #374151;
      --color-tag-ipo-bg:       #F3E8FF;
      --color-tag-ipo-text:     #6B21A8;

  /* stock tag colors */
  --color-stock-green-bg:    #D8F3DC;
  --color-stock-green-text:  #1B4332;
  --color-stock-blue-bg:     #DBEAFE;
  --color-stock-blue-text:   #1E40AF;
  --color-stock-red-bg:      #FEE2E2;
  --color-stock-red-text:    #991B1B;

  /* ---- Typography ---- */
  --font-serif:           'Noto Serif SC', 'Source Han Serif SC', 'SimSun', 'Songti SC', serif;
  --font-sans:            'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:            'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

  --font-size-xs:         0.75rem;   /* 12px */
  --font-size-sm:         0.8125rem; /* 13px */
  --font-size-base:       0.9375rem; /* 15px */
  --font-size-md:         1rem;      /* 16px */
  --font-size-lg:         1.125rem;  /* 18px */
  --font-size-xl:         1.25rem;   /* 20px */
  --font-size-2xl:        1.5rem;    /* 24px */
  --font-size-3xl:        2rem;      /* 32px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.3;
  --line-height-normal:   1.6;
  --line-height-relaxed:  1.75;

  /* ---- Spacing ---- */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* ---- Borders ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-full: 9999px;

  --border-thin: 1px solid var(--color-card-border);

  /* ---- Shadows ---- */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-card: var(--shadow-sm);

  /* ---- Transitions ---- */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Layout ---- */
  --container-max:      760px;
  --container-padding:  var(--space-5);
  --header-height:      56px;

  /* ---- Z-index ---- */
  --z-header:  100;
  --z-overlay: 200;
}

/* ---- Dark Mode ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary:        #4ade80;
    --color-primary-light:  #6ee7a0;
    --color-primary-dark:   #22c55e;

    --color-bg:             #111311;
    --color-bg-header:      rgba(17, 19, 17, 0.88);
    --color-card:           #1c1f1c;
    --color-card-hover:     #222522;
    --color-card-border:    #2a2d2a;

    --color-text:           #e5e5e0;
    --color-text-secondary: #8a8a85;
    --color-text-muted:     #5a5a55;
    --color-text-inverse:   #111311;

    --border-thin: 1px solid var(--color-card-border);

    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-card: var(--shadow-sm);

    /* Dark mode: adjust tag backgrounds for readability */
    --color-tag-ai-bg:         rgba(74, 222, 128, 0.15);
    --color-tag-ai-text:       #6ee7b0;
    --color-tag-tech-bg:       rgba(96, 165, 250, 0.15);
    --color-tag-tech-text:     #93c5fd;
    --color-tag-finance-bg:    rgba(248, 113, 113, 0.15);
    --color-tag-finance-text:  #fca5a5;
    --color-tag-policy-bg:     rgba(251, 191, 36, 0.15);
    --color-tag-policy-text:   #fcd34d;
    --color-tag-intl-bg:       rgba(167, 139, 250, 0.15);
    --color-tag-intl-text:     #c4b5fd;
    --color-tag-product-bg:    rgba(244, 114, 182, 0.15);
    --color-tag-product-text:  #f9a8d4;
    --color-tag-consumer-bg:   rgba(45, 212, 191, 0.15);
    --color-tag-consumer-text: #5eead4;
    --color-tag-chip-bg:       rgba(129, 140, 248, 0.15);
    --color-tag-chip-text:     #a5b4fc;
    --color-tag-enterprise-bg: rgba(244, 114, 182, 0.15);
    --color-tag-enterprise-text: #f9a8d4;
    --color-tag-robotics-bg:   rgba(52, 211, 153, 0.15);
    --color-tag-robotics-text: #6ee7b0;
    --color-tag-research-bg:   rgba(167, 139, 250, 0.15);
    --color-tag-research-text: #c4b5fd;
    --color-tag-security-bg:  rgba(248, 113, 113, 0.15);
    --color-tag-security-text: #fca5a5;
    --color-tag-agent-bg:     rgba(96, 165, 250, 0.15);
    --color-tag-agent-text:   #93c5fd;
    --color-tag-infra-bg:     rgba(74, 222, 128, 0.12);
    --color-tag-infra-text:   #6ee7b0;
    --color-tag-open-bg:      rgba(251, 191, 36, 0.15);
    --color-tag-open-text:    #fcd34d;
    --color-tag-ipo-bg:       rgba(192, 132, 252, 0.15);
    --color-tag-ipo-text:     #e9d5ff;

    --color-stock-green-bg:    rgba(74, 222, 128, 0.15);
    --color-stock-green-text:  #6ee7b0;
    --color-stock-blue-bg:     rgba(96, 165, 250, 0.15);
    --color-stock-blue-text:   #93c5fd;
    --color-stock-red-bg:      rgba(248, 113, 113, 0.15);
    --color-stock-red-text:    #fca5a5;
  }
}