/**
 * Antumo Design System - Light Theme Colors
 * Semantic color variables for light mode
 */

:root {
  /* ===== Background Colors ===== */
  --color-bg-primary: var(--color-grey-100);      /* Page background */
  --color-bg-secondary: var(--color-white);       /* Card/container background */
  --color-bg-tertiary: var(--color-grey-50);      /* Elevated elements, hover states */
  --color-bg-quaternary: var(--color-grey-200);   /* Progress bar background */
  --color-bg-brand: var(--color-navy-500);        /* Sidebar background */
  --color-bg-brand-hover: var(--color-navy-600);  /* Sidebar hover */
  --color-bg-brand-active: var(--color-navy-450); /* Sidebar active item */

  /* ===== Text Colors ===== */
  --color-text-primary: var(--color-grey-900);    /* Main text */
  --color-text-secondary: var(--color-grey-700);  /* Secondary text */
  --color-text-tertiary: var(--color-grey-600);   /* Muted text */
  --color-text-quaternary: var(--color-grey-400); /* Placeholder, disabled */
  --color-text-on-brand: var(--color-white);      /* Text on brand backgrounds */
  --color-text-on-brand-secondary: var(--color-grey-400); /* Secondary text on brand */

  /* ===== Border Colors ===== */
  --color-border-primary: var(--color-grey-300);  /* Default borders */
  --color-border-secondary: var(--color-grey-200); /* Subtle borders */
  --color-border-tertiary: var(--color-grey-100); /* Very subtle borders */

  /* ===== Interactive Colors ===== */
  --color-interactive-primary: var(--color-navy-500);
  --color-interactive-primary-hover: var(--color-navy-600);
  --color-interactive-secondary: var(--color-grey-50);
  --color-interactive-secondary-hover: var(--color-grey-100);

  /* ===== Button Colors ===== */
  --color-btn-primary-bg: var(--color-navy-500);
  --color-btn-primary-bg-hover: var(--color-navy-600);
  --color-btn-primary-text: var(--color-white);
  --color-btn-secondary-bg: var(--color-white);
  --color-btn-secondary-bg-hover: var(--color-grey-50);
  --color-btn-secondary-text: var(--color-navy-500);
  --color-btn-secondary-border: var(--color-grey-300);

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

  /* ===== Card Colors ===== */
  --color-card-bg: var(--color-white);
  --color-card-border: var(--color-grey-200);

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

  /* ===== Chart Colors ===== */
  --color-chart-grid: var(--color-grey-200);
  --color-chart-axis-text: var(--color-grey-600);

  /* ===== Top Navigation ===== */
  --color-topnav-bg: var(--color-white);
  --color-topnav-border: var(--color-grey-200);
  --color-topnav-text: var(--color-grey-900);
  --color-topnav-text-secondary: var(--color-grey-600);

  /* ===== Footer ===== */
  --color-footer-text: var(--color-grey-600);
}