/* 使用 Tailwind CSS v4 的 Theme variable namespaces 功能，可以讓 Tailwind 自動產生對應的 utility class */
/* @see: https://tailwindcss.com/docs/theme#theme-variable-namespaces */

/*之所以有這個是為了兼容舊樣式,DN039開始走宣告變數引用,這邊之後就不再使用*/
@theme {
  --color-primary-200: #69ffff;
  --color-primary-300: #3c63b9;
  --color-primary-400: #1d3f97;
  --color-primary-500: #3498db;
  --color-primary-600: #063d90;
  --color-primary-700: #0c1429;
  --color-secondary-400: #2cb986;
  --color-secondary-500: #2ecc71;
  --color-danger-400: #ff9fde;
  --color-danger-500: #e74c3c;
  --color-danger-600: #754b71;
  --color-success: #27ae60;
  --color-warning: #f39c12;
  --color-gray: #bdc3c7;
  --color-background: #d7e9ff;
  --color-border: #fff;
  --color-text: #2c3e50;
  --color-white: #ffffff;
  --color-navigation: #3b5b8c;
  --color-input: #abc2e4;
}

/*未來都會使用這一段的方式*/
@layer theme {
  .dark-theme {
    --color-Primary01: #7BF037;
    --color-Primary02: #266700;
    --color-Primary99: #84FF3D;

    --color-Gary01: #E5E5EA;
    --color-Gary02: #C7C7CC;
    --color-Gary03: #8E8E93;
    --color-Gary04: #636366;
    --color-Gary05: #383838;
    --color-Gary07: #1C1C1E;
    --color-Gary08: #0F0F0F;

    --color-danger-500: #e74c3c;
    --color-warning: #f39c12;

    --color-White: #fff;
    --color-Black: #000;
    --color-Black99: #0C0C0C;

    /* Primitive：半透明黑（遮罩用） */
    --color-black-alpha-50: rgba(0, 0, 0, 0.5);
    --color-black-alpha-30: rgba(0, 0, 0, 0.3);
    --color-black-alpha-25: rgba(0, 0, 0, 0.25);
    --color-black-alpha-40: rgba(0, 0, 0, 0.4);

    /* Primitive：半透明主色／白（光暈、卡片底、分隔線用） */
    --color-primary-alpha-12: #7BF0371F;
    --color-primary-alpha-35: #7BF03759;
    --color-primary-alpha-60: #7BF03799;
    --color-white-alpha-4: #FFFFFF0A;
    --color-white-alpha-8: #FFFFFF14;
    --color-white-alpha-30: #FFFFFF4D;
    --color-white-alpha-70: rgba(255, 255, 255, 0.7);
    --color-danger-alpha-12: #E74C3C1F;
    --color-danger-alpha-40: #E74C3C66;

    --color-Accent01: #FF2C2C;
    --color-Accent02: #FFD600;
    --color-Accent03: #BE1616;

    --color-Accent99: #FCDF7B;

    /* Primitive：新增色相（卡片底、錯誤色、金色標籤等無既有色票可沿用） */
    --color-Charcoal01: #141414;
    --color-Charcoal02: #0A0A0A;
    --color-Red01: #FF5252;
    --color-Red02: #C0392B;
    --color-Gold01: #AB894D;

    /* Semantic */
    --color-border-card: var(--color-primary-alpha-35);
    --color-surface-card: var(--color-Charcoal01);
    --color-surface-card-hover: var(--color-primary-alpha-12);
    --color-surface-card-fill: var(--color-white-alpha-4);
    --color-text-error: var(--color-Red01);
    --color-glow-primary: var(--color-primary-alpha-60);
    --color-surface-modal: var(--color-Charcoal02);
    --color-text-table-label: var(--color-Gold01);
    --color-text-overdraft: var(--color-Red02);
    --color-divider-faint: var(--color-white-alpha-8);
    --color-scrollbar-thumb: var(--color-white-alpha-30);
    --color-shadow-dropdown: var(--color-black-alpha-40);
    --color-shine-highlight: var(--color-white-alpha-70);
    --color-text-primary: var(--color-Gary01);
    --color-text-muted: var(--color-Gary03);
    --color-border-divider: var(--color-Gary07);
    --color-border-subtle: var(--color-Gary05);
    --color-surface-sunken: var(--color-Gary08);
    --color-shadow-soft: var(--color-black-alpha-25);

    /* Component */
    --color-CardBorder: var(--color-border-card);
    --color-CardBg: var(--color-surface-card);
    --color-CardHoverBg: var(--color-surface-card-hover);
    --color-CardFillBg: var(--color-surface-card-fill);
    --color-ErrorText: var(--color-text-error);
    --color-PrimaryGlow: var(--color-glow-primary);
    --color-ModalBg: var(--color-surface-modal);
    --color-TableLabel: var(--color-text-table-label);
    --color-Overdraft: var(--color-text-overdraft);
    --color-DividerFaint: var(--color-divider-faint);
    --color-ScrollbarThumb: var(--color-scrollbar-thumb);
    --color-DropdownShadow: var(--color-shadow-dropdown);
    --color-SignInPageBg: var(--color-Black99);


    /* Component：會員中心 */
    --color-member-center-text: var(--color-text-primary);
    --color-member-center-muted: var(--color-text-muted);
    --color-member-center-submenu-line: var(--color-border-divider);
    --color-member-center-help-border: var(--color-border-subtle);
    --color-member-center-help-item: var(--color-surface-sunken);
    --color-member-center-help-item-border: var(--color-border-divider);
    --color-member-center-shadow: var(--color-shadow-soft);
  }
}