/* =============================================================
   DESIGN TOKENS — Cây Khế Chứng Khoán
   Source of truth for all CSS custom properties.
   Do not redefine these tokens in other files.
   ============================================================= */

:root {
  /* --- Primary — Green (#16a34a = green-600) --- */
  --primary-color: #16a34a;
  --primary-hover: #15803d;
  --primary-gradient: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  --primary-light: #f0fdf4;
  --primary-soft: #ecfdf5;
  --primary-border: #bbf7d0;

  /* --- Brand — Purple (logo, navbar identity) --- */
  --brand-color: #7c3aed;
  --brand-hover: #6d28d9;

  /* --- Secondary — Purple (#7c3aed = violet-600) --- */
  --secondary-color: #7c3aed;
  --secondary-hover: #6d28d9;
  --secondary-light: #f5f3ff;
  --secondary-border: #ddd6fe;

  /* --- Neutral — Slate --- */
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --border-color: #e5e7eb;
  --bg-input: #f3f4f6;
  --bg-page: #f9fafb;
  --bg-card: #ffffff;

  /* --- Semantic colors --- */
  --success-color: #16a34a;
  --danger-color: #ef4444;
  --warning-color: #f59e0b;
  --info-color: #7c3aed;
  --accent-color: #f59e0b;

  /* --- Legacy aliases (keep so old CSS files don't break) --- */
  --dark-color: #1e293b;
  --light-color: #f8fafc;
  --secondary-gray: #64748b;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Dark mode global tokens (Giai đoạn 1 — Blog scope) */
html[data-theme="dark"] {
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --border-color:   #334155;
  --bg-page:        #0f172a;
  --bg-card:        #1e293b;
  --bg-input:       #1e293b;
}