/**
 * Antumo Design System - Dark Theme Colors
 * Semantic color variables for dark mode
 * Based on Figma: https://www.figma.com/design/aKIP8PcGfbAMKAZNhEbDOZ/Antumo-|-Design-System?node-id=379-83568
 */

[data-theme="dark"] {
  /* ===== Dark Mode Base Colors ===== */
  --color-dark-bg-primary: #13161B;       /* Main page background - slightly gray */
  --color-dark-bg-secondary: #0C0E12;     /* Card/sidebar background - darker */
  --color-dark-bg-elevated: #22262F;      /* Elevated elements, buttons */
  --color-dark-border: #22262F;           /* Borders */
  --color-dark-text-primary: #FFFFFF;     /* Primary text */
  --color-dark-text-secondary: #94979C;   /* Secondary text */
  --color-dark-text-tertiary: #535862;    /* Muted text */
  --color-dark-nav-active: #333333;       /* Active nav item background */

  /* ===== Background Colors ===== */
  --color-bg-primary: var(--color-dark-bg-primary);
  --color-bg-secondary: var(--color-dark-bg-secondary);
  --color-bg-tertiary: var(--color-dark-bg-elevated);
  --color-bg-quaternary: var(--color-grey-800);
  --color-bg-brand: var(--color-dark-bg-secondary);         /* Sidebar background - darker */
  --color-bg-brand-hover: var(--color-dark-bg-elevated);    /* Sidebar hover */
  --color-bg-brand-active: var(--color-dark-nav-active);    /* Active nav item */

  /* ===== Text Colors ===== */
  --color-text-primary: var(--color-dark-text-primary);
  --color-text-secondary: var(--color-dark-text-secondary);
  --color-text-tertiary: var(--color-dark-text-tertiary);
  --color-text-quaternary: var(--color-grey-600);
  --color-text-on-brand: var(--color-white);
  --color-text-on-brand-secondary: var(--color-grey-400);

  /* ===== Border Colors ===== */
  --color-border-primary: var(--color-dark-border);
  --color-border-secondary: var(--color-dark-border);
  --color-border-tertiary: var(--color-grey-800);

  /* ===== Interactive Colors ===== */
  --color-interactive-primary: var(--color-navy-400);
  --color-interactive-primary-hover: var(--color-navy-300);
  --color-interactive-secondary: var(--color-dark-bg-elevated);
  --color-interactive-secondary-hover: var(--color-grey-700);

  /* ===== Button Colors ===== */
  --color-btn-primary-bg: var(--color-navy-400);
  --color-btn-primary-bg-hover: var(--color-navy-300);
  --color-btn-primary-text: var(--color-white);
  --color-btn-secondary-bg: var(--color-dark-bg-elevated);
  --color-btn-secondary-bg-hover: var(--color-grey-700);
  --color-btn-secondary-text: var(--color-white);
  --color-btn-secondary-border: var(--color-dark-border);

  /* ===== Form Colors ===== */
  --color-input-bg: var(--color-dark-bg-secondary);
  --color-input-bg-disabled: var(--color-grey-900);
  --color-input-border: var(--color-dark-border);
  --color-input-border-hover: var(--color-navy-400);
  --color-input-text: var(--color-white);
  --color-input-placeholder: var(--color-grey-500);

  /* ===== Card Colors ===== */
  --color-card-bg: var(--color-dark-bg-secondary);
  --color-card-border: var(--color-dark-border);

  /* ===== Toast Colors ===== */
  --color-toast-bg: var(--color-dark-bg-elevated);

  /* ===== Chart Colors ===== */
  --color-chart-grid: var(--color-grey-700);
  --color-chart-axis-text: var(--color-dark-text-tertiary);

  /* ===== Top Navigation ===== */
  --color-topnav-bg: var(--color-dark-bg-primary);
  --color-topnav-border: var(--color-dark-border);
  --color-topnav-text: var(--color-white);
  --color-topnav-text-secondary: var(--color-dark-text-secondary);

  /* ===== Footer ===== */
  --color-footer-text: var(--color-dark-text-secondary);
}