@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: #00e5ff;
  --art-secondary: #38c0fc;
  --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: #0c0e12;
  --art-gray-200: #14171c;
  --art-gray-300: #1e2229;
  --art-gray-400: #2a2f38;
  --art-gray-500: #626a77;
  --art-gray-600: #6a7280;
  --art-gray-700: #98a0ad;
  --art-gray-800: #c9ced6;
  --art-gray-900: #e8ebf0;

  /* Border Colors (中性白低透明度，冷蓝感最低) */
  --art-card-border: rgba(255, 255, 255, 0.1);

  --default-border: rgba(255, 255, 255, 0.12);
  --default-border-dashed: rgba(255, 255, 255, 0.16);

  /* Background Colors (近黑中性画布 + 中性炭灰面板) */
  --default-bg-color: #0b0d11;
  --default-box-color: #15181e;

  /* Hover Color */
  --art-hover-color: #20242b;

  /* Active Color */
  --art-active-color: #1a1e24;

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

/* ==================== 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;
        }
      }
    }
  }
}
