/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Design Tokens - I.D.O.cab */
@layer base {
  :root {
    /* Background Depth Levels */
    --color-background-dp00: #FFFFFF;
    --color-background-dp01: #FFFFFF;
    --color-background-dp02: #F5F5F5;
    --color-background-dp03: #ECECEC;
    --color-background-dp04: #E0E0E0;

    /* Primary Colors */
    --color-primary-50: #eef2ff;
    --color-primary-100: #e0e7ff;
    --color-primary-200: #c7d2fe;
    --color-primary-300: #a5b4fc;
    --color-primary-400: #818cf8;
    --color-primary-500: #6366f1;
    --color-primary-600: #4f46e5;
    --color-primary-700: #4338ca;
    --color-primary-800: #3730a3;
    --color-primary-900: #312e81;

    /* Secondary Colors */
    --color-secondary-50: #ecfdf5;
    --color-secondary-100: #d1fae5;
    --color-secondary-200: #a7f3d0;
    --color-secondary-300: #6ee7b7;
    --color-secondary-400: #34d399;
    --color-secondary-500: #10b981;
    --color-secondary-600: #059669;
    --color-secondary-700: #047857;
    --color-secondary-800: #065f46;
    --color-secondary-900: #064e3b;

    /* Neutral Colors */
    --color-neutral-50: #f9f9f9;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #eeeeee;
    --color-neutral-300: #e0e0e0;
    --color-neutral-400: #bdbdbd;
    --color-neutral-500: #9e9e9e;
    --color-neutral-600: #757575;
    --color-neutral-700: #616161;
    --color-neutral-800: #424242;
    --color-neutral-900: #212121;

    /* Info Colors (Blue) */
    --color-info-50: #eff6ff;
    --color-info-100: #dbeafe;
    --color-info-200: #bfdbfe;
    --color-info-300: #93c5fd;
    --color-info-400: #60a5fa;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;
    --color-info-700: #1d4ed8;
    --color-info-800: #1e40af;
    --color-info-900: #1e3a8a;

    /* Success Colors (Green) */
    --color-success-50: #f0fdf4;
    --color-success-100: #dcfce7;
    --color-success-200: #bbf7d0;
    --color-success-300: #86efac;
    --color-success-400: #4ade80;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;
    --color-success-800: #166534;
    --color-success-900: #14532d;

    /* Warning Colors (Amber) */
    --color-warning-50: #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-200: #fde68a;
    --color-warning-300: #fcd34d;
    --color-warning-400: #fbbf24;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;
    --color-warning-800: #92400e;
    --color-warning-900: #78350f;

    /* Danger Colors (Red) */
    --color-danger-50: #fef2f2;
    --color-danger-100: #fee2e2;
    --color-danger-200: #fecaca;
    --color-danger-300: #fca5a5;
    --color-danger-400: #f87171;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;
    --color-danger-800: #991b1b;
    --color-danger-900: #7f1d1d;

    /* Shadows */
    --shade-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shade-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shade-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
    --shade-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
  }

  /* Dark Mode Tokens */
  .dark {
    --color-background-dp00: #202124;
    --color-background-dp01: #2C2D32;
    --color-background-dp02: #2F3035;
    --color-background-dp03: #323438;
    --color-background-dp04: #393C41;

    --color-primary-50: #1a1c2e;
    --color-primary-100: #232546;
    --color-primary-200: #2d3166;
    --color-primary-300: #41498c;
    --color-primary-400: #5a64b3;
    --color-primary-500: #7c89db;
    --color-primary-600: #9daaff;
    --color-primary-700: #b4c2ff;
    --color-primary-800: #d0d7ff;
    --color-primary-900: #e5e8ff;

    --color-secondary-50: #0d1f18;
    --color-secondary-100: #113026;
    --color-secondary-200: #16503a;
    --color-secondary-300: #1f7a55;
    --color-secondary-400: #28a374;
    --color-secondary-500: #3ac08a;
    --color-secondary-600: #57d8a2;
    --color-secondary-700: #75e5b7;
    --color-secondary-800: #a2f5d4;
    --color-secondary-900: #d1fae5;

    --color-neutral-50: #121212;
    --color-neutral-100: #181818;
    --color-neutral-200: #1e1e1e;
    --color-neutral-300: #242424;
    --color-neutral-400: #616161;
    --color-neutral-500: #909090;
    --color-neutral-600: #bdbdbd;
    --color-neutral-700: #d6d6d6;
    --color-neutral-800: #eaeaea;
    --color-neutral-900: #f2f2f2;

    /* Info Colors (Blue) - Dark mode */
    --color-info-50: #1e3a5f;
    --color-info-100: #1e4976;
    --color-info-200: #1d5a94;
    --color-info-300: #2563eb;
    --color-info-400: #3b82f6;
    --color-info-500: #60a5fa;
    --color-info-600: #93c5fd;
    --color-info-700: #bfdbfe;
    --color-info-800: #dbeafe;
    --color-info-900: #eff6ff;

    /* Success Colors (Green) - Dark mode */
    --color-success-50: #14332a;
    --color-success-100: #16503a;
    --color-success-200: #166534;
    --color-success-300: #15803d;
    --color-success-400: #22c55e;
    --color-success-500: #4ade80;
    --color-success-600: #86efac;
    --color-success-700: #bbf7d0;
    --color-success-800: #dcfce7;
    --color-success-900: #f0fdf4;

    /* Warning Colors (Amber) - Dark mode */
    --color-warning-50: #3d2e0a;
    --color-warning-100: #5c4512;
    --color-warning-200: #78350f;
    --color-warning-300: #b45309;
    --color-warning-400: #d97706;
    --color-warning-500: #f59e0b;
    --color-warning-600: #fbbf24;
    --color-warning-700: #fcd34d;
    --color-warning-800: #fef3c7;
    --color-warning-900: #fffbeb;

    /* Danger Colors (Red) - Dark mode */
    --color-danger-50: #3f1d1d;
    --color-danger-100: #5c2626;
    --color-danger-200: #7f1d1d;
    --color-danger-300: #991b1b;
    --color-danger-400: #dc2626;
    --color-danger-500: #ef4444;
    --color-danger-600: #f87171;
    --color-danger-700: #fca5a5;
    --color-danger-800: #fee2e2;
    --color-danger-900: #fef2f2;

    --shade-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shade-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shade-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shade-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  }
}

/* Typography Classes */
@layer components {
  .title-h1 {
    @apply text-3xl md:text-4xl font-bold leading-tight;
    color: var(--color-neutral-900);
  }

  .title-h2 {
    @apply text-2xl md:text-3xl font-bold leading-tight;
    color: var(--color-neutral-900);
  }

  .title-h3 {
    @apply text-xl md:text-2xl font-semibold leading-snug;
    color: var(--color-neutral-900);
  }

  .title-h4 {
    @apply text-lg md:text-xl font-semibold leading-snug;
    color: var(--color-neutral-800);
  }

  .text-body {
    @apply text-base leading-relaxed;
    color: var(--color-neutral-700);
  }

  .text-small {
    @apply text-sm leading-relaxed;
    color: var(--color-neutral-600);
  }

  .text-button {
    @apply text-sm font-medium leading-none;
  }

  /* Card Components */
  .section-card {
    @apply bg-background-dp01 rounded-lg shadow-sm transition-colors;
    border: 1px solid var(--color-neutral-200);
  }

  .flat-card {
    @apply bg-background-dp01 rounded-lg;
    border: 1px solid var(--color-neutral-100);
  }

  .stat-card {
    @apply p-4 bg-background-dp01 rounded-lg shadow-sm;
    border: 1px solid var(--color-neutral-200);
  }

  /* Background Depth Classes */
  .bg-background-dp00 {
    background-color: var(--color-background-dp00) !important;
  }

  .bg-background-dp01 {
    background-color: var(--color-background-dp01) !important;
  }

  .bg-background-dp02 {
    background-color: var(--color-background-dp02) !important;
  }

  .bg-background-dp03 {
    background-color: var(--color-background-dp03) !important;
  }

  .bg-background-dp04 {
    background-color: var(--color-background-dp04) !important;
  }

  /* Primary Colors - Background */
  .bg-primary-50 {
    background-color: var(--color-primary-50) !important;
  }

  .bg-primary-100 {
    background-color: var(--color-primary-100) !important;
  }

  .bg-primary-200 {
    background-color: var(--color-primary-200) !important;
  }

  .bg-primary-300 {
    background-color: var(--color-primary-300) !important;
  }

  .bg-primary-400 {
    background-color: var(--color-primary-400) !important;
  }

  .bg-primary-500 {
    background-color: var(--color-primary-500) !important;
  }

  .bg-primary-600 {
    background-color: var(--color-primary-600) !important;
  }

  .bg-primary-700 {
    background-color: var(--color-primary-700) !important;
  }

  .bg-primary-800 {
    background-color: var(--color-primary-800) !important;
  }

  .bg-primary-900 {
    background-color: var(--color-primary-900) !important;
  }

  /* Primary Colors - Text */
  .text-primary-50 {
    color: var(--color-primary-50) !important;
  }

  .text-primary-100 {
    color: var(--color-primary-100) !important;
  }

  .text-primary-200 {
    color: var(--color-primary-200) !important;
  }

  .text-primary-300 {
    color: var(--color-primary-300) !important;
  }

  .text-primary-400 {
    color: var(--color-primary-400) !important;
  }

  .text-primary-500 {
    color: var(--color-primary-500) !important;
  }

  .text-primary-600 {
    color: var(--color-primary-600) !important;
  }

  .text-primary-700 {
    color: var(--color-primary-700) !important;
  }

  .text-primary-800 {
    color: var(--color-primary-800) !important;
  }

  .text-primary-900 {
    color: var(--color-primary-900) !important;
  }

  /* Primary Colors - Border */
  .border-primary-50 {
    border-color: var(--color-primary-50) !important;
  }

  .border-primary-100 {
    border-color: var(--color-primary-100) !important;
  }

  .border-primary-200 {
    border-color: var(--color-primary-200) !important;
  }

  .border-primary-300 {
    border-color: var(--color-primary-300) !important;
  }

  .border-primary-400 {
    border-color: var(--color-primary-400) !important;
  }

  .border-primary-500 {
    border-color: var(--color-primary-500) !important;
  }

  .border-primary-600 {
    border-color: var(--color-primary-600) !important;
  }

  .border-primary-700 {
    border-color: var(--color-primary-700) !important;
  }

  .border-primary-800 {
    border-color: var(--color-primary-800) !important;
  }

  .border-primary-900 {
    border-color: var(--color-primary-900) !important;
  }

  /* Secondary Colors - Background */
  .bg-secondary-50 {
    background-color: var(--color-secondary-50) !important;
  }

  .bg-secondary-100 {
    background-color: var(--color-secondary-100) !important;
  }

  .bg-secondary-200 {
    background-color: var(--color-secondary-200) !important;
  }

  .bg-secondary-300 {
    background-color: var(--color-secondary-300) !important;
  }

  .bg-secondary-400 {
    background-color: var(--color-secondary-400) !important;
  }

  .bg-secondary-500 {
    background-color: var(--color-secondary-500) !important;
  }

  .bg-secondary-600 {
    background-color: var(--color-secondary-600) !important;
  }

  .bg-secondary-700 {
    background-color: var(--color-secondary-700) !important;
  }

  .bg-secondary-800 {
    background-color: var(--color-secondary-800) !important;
  }

  .bg-secondary-900 {
    background-color: var(--color-secondary-900) !important;
  }

  /* Secondary Colors - Text */
  .text-secondary-50 {
    color: var(--color-secondary-50) !important;
  }

  .text-secondary-100 {
    color: var(--color-secondary-100) !important;
  }

  .text-secondary-200 {
    color: var(--color-secondary-200) !important;
  }

  .text-secondary-300 {
    color: var(--color-secondary-300) !important;
  }

  .text-secondary-400 {
    color: var(--color-secondary-400) !important;
  }

  .text-secondary-500 {
    color: var(--color-secondary-500) !important;
  }

  .text-secondary-600 {
    color: var(--color-secondary-600) !important;
  }

  .text-secondary-700 {
    color: var(--color-secondary-700) !important;
  }

  .text-secondary-800 {
    color: var(--color-secondary-800) !important;
  }

  .text-secondary-900 {
    color: var(--color-secondary-900) !important;
  }

  /* Secondary Colors - Border */
  .border-secondary-50 {
    border-color: var(--color-secondary-50) !important;
  }

  .border-secondary-100 {
    border-color: var(--color-secondary-100) !important;
  }

  .border-secondary-200 {
    border-color: var(--color-secondary-200) !important;
  }

  .border-secondary-300 {
    border-color: var(--color-secondary-300) !important;
  }

  .border-secondary-400 {
    border-color: var(--color-secondary-400) !important;
  }

  .border-secondary-500 {
    border-color: var(--color-secondary-500) !important;
  }

  .border-secondary-600 {
    border-color: var(--color-secondary-600) !important;
  }

  .border-secondary-700 {
    border-color: var(--color-secondary-700) !important;
  }

  .border-secondary-800 {
    border-color: var(--color-secondary-800) !important;
  }

  .border-secondary-900 {
    border-color: var(--color-secondary-900) !important;
  }

  /* Neutral Colors - Background */
  .bg-neutral-50 {
    background-color: var(--color-neutral-50) !important;
  }

  .bg-neutral-100 {
    background-color: var(--color-neutral-100) !important;
  }

  .bg-neutral-200 {
    background-color: var(--color-neutral-200) !important;
  }

  .bg-neutral-300 {
    background-color: var(--color-neutral-300) !important;
  }

  .bg-neutral-400 {
    background-color: var(--color-neutral-400) !important;
  }

  .bg-neutral-500 {
    background-color: var(--color-neutral-500) !important;
  }

  .bg-neutral-600 {
    background-color: var(--color-neutral-600) !important;
  }

  .bg-neutral-700 {
    background-color: var(--color-neutral-700) !important;
  }

  .bg-neutral-800 {
    background-color: var(--color-neutral-800) !important;
  }

  .bg-neutral-900 {
    background-color: var(--color-neutral-900) !important;
  }

  /* Neutral Colors - Text */
  .text-neutral-50 {
    color: var(--color-neutral-50) !important;
  }

  .text-neutral-100 {
    color: var(--color-neutral-100) !important;
  }

  .text-neutral-200 {
    color: var(--color-neutral-200) !important;
  }

  .text-neutral-300 {
    color: var(--color-neutral-300) !important;
  }

  .text-neutral-400 {
    color: var(--color-neutral-400) !important;
  }

  .text-neutral-500 {
    color: var(--color-neutral-500) !important;
  }

  .text-neutral-600 {
    color: var(--color-neutral-600) !important;
  }

  .text-neutral-700 {
    color: var(--color-neutral-700) !important;
  }

  .text-neutral-800 {
    color: var(--color-neutral-800) !important;
  }

  .text-neutral-900 {
    color: var(--color-neutral-900) !important;
  }

  /* Neutral Colors - Border */
  .border-neutral-50 {
    border-color: var(--color-neutral-50) !important;
  }

  .border-neutral-100 {
    border-color: var(--color-neutral-100) !important;
  }

  .border-neutral-200 {
    border-color: var(--color-neutral-200) !important;
  }

  .border-neutral-300 {
    border-color: var(--color-neutral-300) !important;
  }

  .border-neutral-400 {
    border-color: var(--color-neutral-400) !important;
  }

  .border-neutral-500 {
    border-color: var(--color-neutral-500) !important;
  }

  .border-neutral-600 {
    border-color: var(--color-neutral-600) !important;
  }

  .border-neutral-700 {
    border-color: var(--color-neutral-700) !important;
  }

  .border-neutral-800 {
    border-color: var(--color-neutral-800) !important;
  }

  .border-neutral-900 {
    border-color: var(--color-neutral-900) !important;
  }

  /* Info Colors - Background */
  .bg-info-50 {
    background-color: var(--color-info-50) !important;
  }

  .bg-info-100 {
    background-color: var(--color-info-100) !important;
  }

  .bg-info-200 {
    background-color: var(--color-info-200) !important;
  }

  .bg-info-300 {
    background-color: var(--color-info-300) !important;
  }

  .bg-info-400 {
    background-color: var(--color-info-400) !important;
  }

  .bg-info-500 {
    background-color: var(--color-info-500) !important;
  }

  .bg-info-600 {
    background-color: var(--color-info-600) !important;
  }

  .bg-info-700 {
    background-color: var(--color-info-700) !important;
  }

  .bg-info-800 {
    background-color: var(--color-info-800) !important;
  }

  .bg-info-900 {
    background-color: var(--color-info-900) !important;
  }

  /* Info Colors - Text */
  .text-info-50 {
    color: var(--color-info-50) !important;
  }

  .text-info-100 {
    color: var(--color-info-100) !important;
  }

  .text-info-200 {
    color: var(--color-info-200) !important;
  }

  .text-info-300 {
    color: var(--color-info-300) !important;
  }

  .text-info-400 {
    color: var(--color-info-400) !important;
  }

  .text-info-500 {
    color: var(--color-info-500) !important;
  }

  .text-info-600 {
    color: var(--color-info-600) !important;
  }

  .text-info-700 {
    color: var(--color-info-700) !important;
  }

  .text-info-800 {
    color: var(--color-info-800) !important;
  }

  .text-info-900 {
    color: var(--color-info-900) !important;
  }

  /* Info Colors - Border */
  .border-info-50 {
    border-color: var(--color-info-50) !important;
  }

  .border-info-100 {
    border-color: var(--color-info-100) !important;
  }

  .border-info-200 {
    border-color: var(--color-info-200) !important;
  }

  .border-info-300 {
    border-color: var(--color-info-300) !important;
  }

  .border-info-400 {
    border-color: var(--color-info-400) !important;
  }

  .border-info-500 {
    border-color: var(--color-info-500) !important;
  }

  .border-info-600 {
    border-color: var(--color-info-600) !important;
  }

  .border-info-700 {
    border-color: var(--color-info-700) !important;
  }

  .border-info-800 {
    border-color: var(--color-info-800) !important;
  }

  .border-info-900 {
    border-color: var(--color-info-900) !important;
  }

  /* Success Colors - Background */
  .bg-success-50 {
    background-color: var(--color-success-50) !important;
  }

  .bg-success-100 {
    background-color: var(--color-success-100) !important;
  }

  .bg-success-200 {
    background-color: var(--color-success-200) !important;
  }

  .bg-success-300 {
    background-color: var(--color-success-300) !important;
  }

  .bg-success-400 {
    background-color: var(--color-success-400) !important;
  }

  .bg-success-500 {
    background-color: var(--color-success-500) !important;
  }

  .bg-success-600 {
    background-color: var(--color-success-600) !important;
  }

  .bg-success-700 {
    background-color: var(--color-success-700) !important;
  }

  .bg-success-800 {
    background-color: var(--color-success-800) !important;
  }

  .bg-success-900 {
    background-color: var(--color-success-900) !important;
  }

  /* Success Colors - Text */
  .text-success-50 {
    color: var(--color-success-50) !important;
  }

  .text-success-100 {
    color: var(--color-success-100) !important;
  }

  .text-success-200 {
    color: var(--color-success-200) !important;
  }

  .text-success-300 {
    color: var(--color-success-300) !important;
  }

  .text-success-400 {
    color: var(--color-success-400) !important;
  }

  .text-success-500 {
    color: var(--color-success-500) !important;
  }

  .text-success-600 {
    color: var(--color-success-600) !important;
  }

  .text-success-700 {
    color: var(--color-success-700) !important;
  }

  .text-success-800 {
    color: var(--color-success-800) !important;
  }

  .text-success-900 {
    color: var(--color-success-900) !important;
  }

  /* Success Colors - Border */
  .border-success-50 {
    border-color: var(--color-success-50) !important;
  }

  .border-success-100 {
    border-color: var(--color-success-100) !important;
  }

  .border-success-200 {
    border-color: var(--color-success-200) !important;
  }

  .border-success-300 {
    border-color: var(--color-success-300) !important;
  }

  .border-success-400 {
    border-color: var(--color-success-400) !important;
  }

  .border-success-500 {
    border-color: var(--color-success-500) !important;
  }

  .border-success-600 {
    border-color: var(--color-success-600) !important;
  }

  .border-success-700 {
    border-color: var(--color-success-700) !important;
  }

  .border-success-800 {
    border-color: var(--color-success-800) !important;
  }

  .border-success-900 {
    border-color: var(--color-success-900) !important;
  }

  /* Warning Colors - Background */
  .bg-warning-50 {
    background-color: var(--color-warning-50) !important;
  }

  .bg-warning-100 {
    background-color: var(--color-warning-100) !important;
  }

  .bg-warning-200 {
    background-color: var(--color-warning-200) !important;
  }

  .bg-warning-300 {
    background-color: var(--color-warning-300) !important;
  }

  .bg-warning-400 {
    background-color: var(--color-warning-400) !important;
  }

  .bg-warning-500 {
    background-color: var(--color-warning-500) !important;
  }

  .bg-warning-600 {
    background-color: var(--color-warning-600) !important;
  }

  .bg-warning-700 {
    background-color: var(--color-warning-700) !important;
  }

  .bg-warning-800 {
    background-color: var(--color-warning-800) !important;
  }

  .bg-warning-900 {
    background-color: var(--color-warning-900) !important;
  }

  /* Warning Colors - Text */
  .text-warning-50 {
    color: var(--color-warning-50) !important;
  }

  .text-warning-100 {
    color: var(--color-warning-100) !important;
  }

  .text-warning-200 {
    color: var(--color-warning-200) !important;
  }

  .text-warning-300 {
    color: var(--color-warning-300) !important;
  }

  .text-warning-400 {
    color: var(--color-warning-400) !important;
  }

  .text-warning-500 {
    color: var(--color-warning-500) !important;
  }

  .text-warning-600 {
    color: var(--color-warning-600) !important;
  }

  .text-warning-700 {
    color: var(--color-warning-700) !important;
  }

  .text-warning-800 {
    color: var(--color-warning-800) !important;
  }

  .text-warning-900 {
    color: var(--color-warning-900) !important;
  }

  /* Warning Colors - Border */
  .border-warning-50 {
    border-color: var(--color-warning-50) !important;
  }

  .border-warning-100 {
    border-color: var(--color-warning-100) !important;
  }

  .border-warning-200 {
    border-color: var(--color-warning-200) !important;
  }

  .border-warning-300 {
    border-color: var(--color-warning-300) !important;
  }

  .border-warning-400 {
    border-color: var(--color-warning-400) !important;
  }

  .border-warning-500 {
    border-color: var(--color-warning-500) !important;
  }

  .border-warning-600 {
    border-color: var(--color-warning-600) !important;
  }

  .border-warning-700 {
    border-color: var(--color-warning-700) !important;
  }

  .border-warning-800 {
    border-color: var(--color-warning-800) !important;
  }

  .border-warning-900 {
    border-color: var(--color-warning-900) !important;
  }

  /* Danger Colors - Background */
  .bg-danger-50 {
    background-color: var(--color-danger-50) !important;
  }

  .bg-danger-100 {
    background-color: var(--color-danger-100) !important;
  }

  .bg-danger-200 {
    background-color: var(--color-danger-200) !important;
  }

  .bg-danger-300 {
    background-color: var(--color-danger-300) !important;
  }

  .bg-danger-400 {
    background-color: var(--color-danger-400) !important;
  }

  .bg-danger-500 {
    background-color: var(--color-danger-500) !important;
  }

  .bg-danger-600 {
    background-color: var(--color-danger-600) !important;
  }

  .bg-danger-700 {
    background-color: var(--color-danger-700) !important;
  }

  .bg-danger-800 {
    background-color: var(--color-danger-800) !important;
  }

  .bg-danger-900 {
    background-color: var(--color-danger-900) !important;
  }

  /* Danger Colors - Text */
  .text-danger-50 {
    color: var(--color-danger-50) !important;
  }

  .text-danger-100 {
    color: var(--color-danger-100) !important;
  }

  .text-danger-200 {
    color: var(--color-danger-200) !important;
  }

  .text-danger-300 {
    color: var(--color-danger-300) !important;
  }

  .text-danger-400 {
    color: var(--color-danger-400) !important;
  }

  .text-danger-500 {
    color: var(--color-danger-500) !important;
  }

  .text-danger-600 {
    color: var(--color-danger-600) !important;
  }

  .text-danger-700 {
    color: var(--color-danger-700) !important;
  }

  .text-danger-800 {
    color: var(--color-danger-800) !important;
  }

  .text-danger-900 {
    color: var(--color-danger-900) !important;
  }

  /* Danger Colors - Border */
  .border-danger-50 {
    border-color: var(--color-danger-50) !important;
  }

  .border-danger-100 {
    border-color: var(--color-danger-100) !important;
  }

  .border-danger-200 {
    border-color: var(--color-danger-200) !important;
  }

  .border-danger-300 {
    border-color: var(--color-danger-300) !important;
  }

  .border-danger-400 {
    border-color: var(--color-danger-400) !important;
  }

  .border-danger-500 {
    border-color: var(--color-danger-500) !important;
  }

  .border-danger-600 {
    border-color: var(--color-danger-600) !important;
  }

  .border-danger-700 {
    border-color: var(--color-danger-700) !important;
  }

  .border-danger-800 {
    border-color: var(--color-danger-800) !important;
  }

  .border-danger-900 {
    border-color: var(--color-danger-900) !important;
  }

  /* Common utility colors with CSS variables */
  .bg-white {
    background-color: var(--color-background-dp00) !important;
  }

  .text-white {
    color: #ffffff !important;
  }

  .border-white {
    border-color: #ffffff !important;
  }

  /* Utility Classes */
  .no-visited-link {
    @apply visited:text-current;
  }

  .no-visited {
    color: inherit !important;
  }

  a.no-visited:visited {
    color: inherit !important;
  }

  /* Focus States */
  .border-focus-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    border-color: var(--color-primary-500);
  }

  /* Smooth Transitions */
  * {
    @apply transition-colors duration-200;
  }

  /* Animations */
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(-10px);
    }
  }

  .animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
  }

  .animate-fade-out {
    animation: fade-out 0.3s ease-out forwards;
  }

  /* Sidebar transitions */
  .sidebar-enter {
    transform: translateX(-100%);
  }

  .sidebar-enter-active {
    transform: translateX(0);
    transition: transform 300ms ease-in-out;
  }

  .sidebar-exit {
    transform: translateX(0);
  }

  .sidebar-exit-active {
    transform: translateX(-100%);
    transition: transform 300ms ease-in-out;
  }
}