/* 使用 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-Gary06: #404040;
    --color-Gary07: #1C1C1E;
    --color-Gary08: #0F0F0F;

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

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

    /* Primitive：半透明白（遮罩用） */
    --color-white-alpha-95: rgba(255, 255, 255, 0.95);

    /* 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：半透明灰（帳戶交易紀錄卡片分隔線用，Figma boxShadow rgba(66,66,66,0.25)） */
    --color-gray-alpha-25: rgba(66, 66, 66, 0.25);

    /* Primitive：半透明主色／白（光暈、卡片底、分隔線用） */
    --color-primary-alpha-12: #7BF0371F;
    --color-primary-alpha-35: #7BF03759;
    --color-primary-alpha-60: #7BF03799;
    --color-gray-124-alpha-25: rgba(124, 124, 124, 0.25);
    --color-gray-169-alpha-20: rgba(169, 169, 169, 0.2);
    --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-Accent98: #ED27BE;
    --color-Accent99: #FCDF7B;

    --color-Yellow99: #BFAB6E;

    /* Primitive：新增色相（卡片底、錯誤色、金色標籤等無既有色票可沿用） */
    --color-Charcoal01: #141414;
    --color-Charcoal02: #0A0A0A;
    --color-Red01: #FF5252;
    --color-Red02: #C0392B;
    --color-Gold01: #AB894D;
    /* Primitive：投注記錄／遊戲類型頁，Figma「遊戲種類／品牌」按鈕選中狀態底色（深綠，非既有色票） */
    --color-Green01: #0F1B08;
    --color-Gold02: #B29956;

    /* 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-border-dropdown: var(--color-Gold02);
    /* 下拉選單清除按鈕（✕）的顏色，與 --bg-bet-record-arrow-up/down 箭頭素材的主色 #8E8E93 一致 */
    --color-icon-dropdown-clear: var(--color-Gary03);
    --color-surface-sunken: var(--color-Gary08);
    --color-shadow-soft: var(--color-black-alpha-25);
    --color-divider-record: var(--color-gray-alpha-25);
    --color-divider-record-header: var(--color-gray-124-alpha-25);
    --color-surface-record-row: var(--color-Black99);
    /* Semantic：投注記錄／遊戲類型頁，Tab/Bet/Item 按鈕（遊戲種類、品牌格子）未選中邊框 */
    --color-border-muted: var(--color-Gary06);
    /* Semantic：投注記錄／遊戲類型頁，Tab/Bet/Item 按鈕選中底色 */
    --color-surface-selected: var(--color-Green01);
    /* Semantic：文字／強調／表面（投注記錄與遊戲類型頁起用，Component 層不可直接引用 Primitive） */
    --color-text-secondary: var(--color-Gary02);
    --color-text-strong: var(--color-White);
    --color-text-inverse: var(--color-Black);
    --color-accent: var(--color-Primary01);
    --color-accent-strong: var(--color-Primary99);
    --color-accent-dim: var(--color-Primary02);
    --color-negative: var(--color-Accent01);
    --color-surface-black: var(--color-Black);
    --color-surface-dark: var(--color-Black99);

    /* 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-DropdownBorder: var(--color-border-dropdown);
    --color-DropdownClearIcon: var(--color-icon-dropdown-clear);
    --color-SignInPageBg: var(--color-Black99);
    /* Component：帳戶交易紀錄卡片 */
    --color-RecordDivider: var(--color-divider-record);
    --color-RecordRowBg: var(--color-surface-record-row);
    --color-RecordHeaderDivider: var(--color-divider-record-header);
    /* Component：投注記錄／遊戲類型頁，Tab/Bet/Item 按鈕（Figma componentId 5751:63115/63118） */
    --color-BetItemBorder: var(--color-border-muted);
    --color-BetItemSelectedBg: var(--color-surface-selected);
    /* Component：投注記錄／遊戲類型頁 */
    --color-BetRecordText: var(--color-text-primary);
    --color-BetRecordLabel: var(--color-text-secondary);
    --color-BetRecordValue: var(--color-text-strong);
    --color-BetRecordAccent: var(--color-accent);
    --color-BetRecordTabActive: var(--color-accent-strong);
    --color-BetRecordChipBorder: var(--color-accent-dim);
    --color-BetRecordChipBg: var(--color-surface-black);
    --color-BetRecordSummaryBg: var(--color-surface-dark);
    --color-BetRecordNegative: var(--color-negative);
    --color-BetRecordButtonText: var(--color-text-inverse);
    --color-BetRecordMask: var(--color-surface-black);


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