/* ==========================================================================
   Variables
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     Backgrounds
     ---------------------------------------------------------------------- */

  --color-background: #F9FAFB;
  --color-background-alt: #EFF6FF;
  --color-card: #FFFFFF;
  --color-input-background: #FFFFFF;

  /* ----------------------------------------------------------------------
     Borders
     ---------------------------------------------------------------------- */

  --color-border: #CBD5E1;

  /* ----------------------------------------------------------------------
     Brand
     ---------------------------------------------------------------------- */

  --color-accent: #2563EB;
  --color-accent-light: #DBEAFE;
  --color-accent-text: #FFFFFF;

  /* ----------------------------------------------------------------------
     Status
     ---------------------------------------------------------------------- */

  --color-success: #10B981;
  --color-success-dark: #047857;
  --color-success-light: #ECFDF5;

  --color-danger: #DC2626;
  --color-danger-dark: #B91C1C;
  --color-danger-light: #FEE2E2;

  --color-info: #0EA5E9;
  --color-info-dark: #0369A1;
  --color-info-light: #E0F2FE;

  --color-warning: #F59E0B;
  --color-warning-text: #B45309;

  /* ----------------------------------------------------------------------
     UI Elements
     ---------------------------------------------------------------------- */

  --color-neutral-button: #E5E7EB;
  --color-tag-background: #EDE9FE;
  --color-tag-text: #5B21B6;

  /* ----------------------------------------------------------------------
     Layout
     ---------------------------------------------------------------------- */

  --container-width: 1100px;

  /* ----------------------------------------------------------------------
     Text
     ---------------------------------------------------------------------- */

  --color-text: #111827;
  --color-text-footer: #6B7280;
  --color-text-muted: #6B7280;
  --color-text-secondary: #374151;
  --color-placeholder: #9CA3AF;

  /* ----------------------------------------------------------------------
     Effects
     ---------------------------------------------------------------------- */

  --border-radius-large: 20px;
  --border-radius-medium: 12px;
  --border-radius-small: 8px;

  --transition-fast: 0.2s ease;
}