/*
 * Colors - CSS custom properties for the Voonami color system
 */

:root {
  /* Brand Colors */
  --brand-red: #db1e36;
  --brand-red-dark: #a8182b;

  /* Neutrals */
  --slate-900: #0d1421;
  --slate-800: #1a202c;
  --slate-700: #2d3748;
  --slate-600: #4a5568;
  --slate-500: #718096;
  --slate-400: #a0aec0;
  --slate-300: #cbd5e0;
  --slate-200: #e2e8f0;
  --slate-100: #edf2f7;
  --slate-50: #f7fafc;
  --white: #ffffff;

  /* Deep Slate Blue - accent backgrounds */
  --deep-slate: #284968;
  --deep-slate-dark: #1a365d;

  /* Semantic Colors */
  --color-text: var(--slate-800);
  --color-text-muted: var(--slate-600);
  --color-text-light: var(--slate-200);
  --color-surface: var(--white);
  --color-surface-alt: var(--deep-slate);

  /* Legacy aliases (for backwards compatibility) */
  --nav-bg: var(--slate-800);
  --nav-surface: var(--slate-700);
  --text: var(--slate-200);
  --muted: var(--slate-300);
  --light: var(--slate-100);
  --accent: var(--brand-red);

  /* Shadows */
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-button: 0 10px 24px rgba(219, 30, 54, 0.35);
}