@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

/* ==================== Light Mode Variables ==================== */
:root {
  /* Base Colors */
  --art-color: #ffffff;
  --theme-color: var(--main-color);

  /* Theme Colors - OKLCH Format */
  --art-primary: oklch(0.7 0.23 260);
  --art-secondary: oklch(0.72 0.19 231.6);
  --art-error: oklch(0.73 0.15 25.3);
  --art-info: oklch(0.58 0.03 254.1);
  --art-success: oklch(0.78 0.17 166.1);
  --art-warning: oklch(0.78 0.14 75.5);
  --art-danger: oklch(0.68 0.22 25.3);

  /* Gray Scale - Light Mode */
  --art-gray-100: #f9fafb;
  --art-gray-200: #f2f4f5;
  --art-gray-300: #e6eaeb;
  --art-gray-400: #dbdfe1;
  --art-gray-500: #949eb7;
  --art-gray-600: #7987a1;
  --art-gray-700: #4d5875;
  --art-gray-800: #383853;
  --art-gray-900: #323251;

  /* Border Colors */
  --art-card-border: rgba(0, 0, 0, 0.08);

  --default-border: #e2e8ee;
  --default-border-dashed: #dbdfe9;

  /* Background Colors */
  --default-bg-color: #fafbfc;
  --default-box-color: #ffffff;

  /* Hover Color */
  --art-hover-color: #edeff0;

  /* Active Color */
  --art-active-color: #f2f4f5;

  /* Element Component Active Color */
  --art-el-active-color: #f2f4f5;
}

/* ==================== Dark Mode Variables ==================== */
.dark {
  /* Base Colors */
  --art-color: #000000;

  /* Gray Scale - Dark Mode */
  --art-gray-100: #110f0f;
  --art-gray-200: #17171c;
  --art-gray-300: #393946;
  --art-gray-400: #505062;
  --art-gray-500: #73738c;
  --art-gray-600: #8f8fa3;
  --art-gray-700: #ababba;
  --art-gray-800: #c7c7d1;
  --art-gray-900: #e3e3e8;

  /* Border Colors */
  --art-card-border: rgba(255, 255, 255, 0.08);

  --default-border: rgba(255, 255, 255, 0.1);
  --default-border-dashed: #363843;

  /* Background Colors */
  --default-bg-color: #070707;
  --default-box-color: #161618;

  /* Hover Color */
  --art-hover-color: #252530;

  /* Active Color */
  --art-active-color: #202226;

  /* Element Component Active Color */
  --art-el-active-color: #2e2e38;
}

/* ==================== Tailwind Theme Configuration ==================== */
@theme {
  /* Box Color (Light: white / Dark: black) */
  --color-box: var(--default-box-color);

  /* System Theme Color */
  --color-theme: var(--theme-color);

  /* Hover Color */
  --color-hover-color: var(--art-hover-color);

  /* Active Color */
  --color-active-color: var(--art-active-color);

  /* Active Color */
  --color-el-active-color: var(--art-active-color);

  /* ElementPlus Theme Colors */
  --color-primary: var(--art-primary);
  --color-secondary: var(--art-secondary);
  --color-error: var(--art-error);
  --color-info: var(--art-info);
  --color-success: var(--art-success);
  --color-warning: var(--art-warning);
  --color-danger: var(--art-danger);

  /* Gray Scale Colors (Auto-adapts to dark mode) */
  --color-g-100: var(--art-gray-100);
  --color-g-200: var(--art-gray-200);
  --color-g-300: var(--art-gray-300);
  --color-g-400: var(--art-gray-400);
  --color-g-500: var(--art-gray-500);
  --color-g-600: var(--art-gray-600);
  --color-g-700: var(--art-gray-700);
  --color-g-800: var(--art-gray-800);
  --color-g-900: var(--art-gray-900);
}

/* ==================== Custom Border Radius Utilities ==================== */
@utility rounded-custom-xs {
  border-radius: calc(var(--custom-radius) / 2);
}

@utility rounded-custom-sm {
  border-radius: calc(var(--custom-radius) / 2 + 2px);
}

/* ==================== Custom Utility Classes ==================== */
@layer utilities {
  /* Flexbox Layout Utilities */
  .flex-c {
    @apply flex items-center;
  }

  .flex-b {
    @apply flex justify-between;
  }

  .flex-cc {
    @apply flex items-center justify-center;
  }

  .flex-cb {
    @apply flex items-center justify-between;
  }

  /* Transition Utilities */
  .tad-200 {
    @apply transition-all duration-200;
  }

  .tad-300 {
    @apply transition-all duration-300;
  }

  /* Border Utilities */
  .border-full-d {
    @apply border border-[var(--default-border)];
  }

  .border-b-d {
    @apply border-b border-[var(--default-border)];
  }

  .border-t-d {
    @apply border-t border-[var(--default-border)];
  }

  .border-l-d {
    @apply border-l border-[var(--default-border)];
  }

  .border-r-d {
    @apply border-r border-[var(--default-border)];
  }

  /* Cursor Utilities */
  .c-p {
    @apply cursor-pointer;
  }
}

/* ==================== Custom Component Classes ==================== */
@layer components {
  /* Art Card Header Component */
  .art-card-header {
    @apply flex justify-between pr-6 pb-1;

    .title {
      h4 {
        @apply text-lg font-medium text-g-900;
      }

      p {
        @apply mt-1 text-sm text-g-600;

        span {
          @apply ml-2 font-medium;
        }
      }
    }
  }
}