/* ============================================================
   COLOR VARIABLES - Root化顏色系統
   ============================================================ */

:root {
    --primary: #ffeb3b;
    --primary-dark: #ba8812;
    --secondary: #ffffff8c;

  /* 主要文字顏色 */
  --color-text-primary: #ffffff;
  --color-text-secondary: #000000;
  --color-text-light: #ffeb3b;
  --color-text-dark: #191919;

  /* 背景顏色 */
  --color-bg-white: #fff;
  --color-bg-offwhite: #fffef6;
  --color-bg-light: #f8f7f4;
  --color-bg-lighter: #6f6f6f;
  --color-bg-greyblue: #1e1e3a;/* 灰藍色背景，選單背景色及其他輔助色 */

  /* 強調顏色 */
  --color-accent-orange: #00fdff;/* H2顏色 */

  /* 登入按鈕顏色 */
  --color-btn-login-primary: #ff9800;
  --color-btn-login-bright: #efff00;
  --color-btn-login-secondary: #df9a00;
  --color-btn-login-dark: #b98000;

  /* 註冊按鈕顏色 */
  --color-btn-register-primary: #aa0212;
  --color-btn-register-bright: #dc3545;
  --color-btn-register-secondary: #5f0000;
  --color-btn-register-dark: #b00011;
  --color-btn-register-darker: #740000;
  --gradient-btn-login: radial-gradient(100% 100% at 50% 0, #ffffff 0, #03A9F4 44%, #006ec5 100%);
  --gradient-btn-login-hover: radial-gradient(100% 100% at 50% 0, #ffffff 0, #03A9F4 44%, #006ec5 100%);
  --gradient-btn-register: radial-gradient(100% 100% at 50% 0, #ffffff 0, #ff9e0f 44%, #c37400 100%);
  --gradient-btn-register-hover: radial-gradient(100% 100% at 50% 0, #ffffff 0, #ff9e0f 44%, #c37400 100%);
  /* --gradient-btn-login: linear-gradient(180deg,#ffe7bd,#f7b675); */
  /* 按鈕和交互 */
  --color-btn-hover: #240037;
  --color-button-orange: #ba8812;

  /* 返回頂部按鈕 */
  --color-back-to-top: #e9b950;
  --color-back-to-top-light: #e9b950;
  --color-back-to-top-hover: #e9b950;

  /* 邊框與灰色 */
  --color-border-light: rgba(0, 212, 255, 0.2);
  --color-border-grey: #383868;
  --color-grey-medium: #3e3e3e;
  --color-grey-dark : #ba8812;
  --color-grey-light: #d6d2c4;
  --color-grey-lighter: #ded7c0;
  --color-grey-border: #e8e3d3;

  /* 特殊顏色 */
  --color-gold-shadow: #bd9d00;
  --color-gold-accent: #cfa452;
  --color-red-accent: #e54b4f;
  --color-hover-light: #ddd;
  --color-black: #000000;
  --color-shadow-dark: rgba(0, 0, 0, 0.3);
  --color-box-shadow-dark: rgba(0, 108, 120, 0.49);
  --color-mobile-nav-bg: rgba(81, 67, 56, 0.9);
  --color-box-shadow-subtle: rgb(0, 208, 255);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #00d4ff, #ff00ff);
  --gradient-secondary: linear-gradient(to right, #00fdff, #7b6cff, #f374de);
  --gradient-main-bg: linear-gradient(135deg, #1a1a2e, #0a0a0a);
  --gradient-navbar: linear-gradient(to right, #0084ff, #4530f7, #ab008e);
  --gradient-marquee: linear-gradient(0deg, #00d4ff, #65e5ff);
  --gradient-game-nav: linear-gradient(to right, #0084ff, #4530f7, #ab008e);
  --gradient-game-nav-shdow:0 8px 16px #f374de83, inset -2px -4px 2px #4530f7, inset 0 2px rgba(255, 253, 247, .32);
  --gradient-game: url(../images/bg_200.png) #fff8e8;
  --gradient-member-menu-hover: transparent linear-gradient(90deg, #9e9e9e00 0%, #e8e3d3 72%, #e54b4f00 100%) 0% 0% no-repeat padding-box;
  --gradient-member-icon: transparent linear-gradient(180deg, #e8e3d3 0%, #e8e3d3 72%, #d6d2c4 100%) 0% 0% no-repeat padding-box;
}