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

:root {
    --primary: #86b7fe;
    --primary-dark: #E55A2B;
    --secondary: #0080FF;

  /* 主要文字顏色 */
  --color-text-primary: #514e46;
  --color-text-secondary: #86b7fe;
  --color-text-member-heading: #514e46;
  --color-text-light: #ffffff;
  --color-text-dark: #191919;

  /* 背景顏色 */
  --color-bg-white: #fff;
  --color-bg-offwhite: #fffef6;
  --color-bg-light: #f8f7f4;
  --color-bg-lighter: #f7f2f0;
  --color-bg-cream: #ece7de;
  --color-bg-beige: #e8e3d3;
  --color-bg-beige-light: #e8e3d4;
  --color-bg-greyblue: #fff;

  /* 強調顏色 */
  --color-accent-yellow: #c1c1c1;
  --color-accent-orange: #86b7fe;

  /* 登入按鈕顏色 */
  --color-btn-login-primary: #d8a338;
  --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, #adccfa 0, #86b7fe 44%, #62a0fd 100%);
  --gradient-btn-login-hover: radial-gradient(100% 100% at 50% 0, #c5dbfc 0, #86b7fe 44%, #458ffd 100%);
  --gradient-btn-register: radial-gradient(100% 100% at 50% 0, #ffdb69 0, #ffc107 44%, #ff7100 100%);
  --gradient-btn-register-hover: radial-gradient(100% 100% at 50% 0, #ffeba7 0, #ffc107 44%, #e96a03 100%);

  /* 按鈕和交互 */
  --color-btn-hover: #240037;
  --color-button-orange: #86b7fe;

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

  /* 邊框與灰色 */
  --color-border-light: #86b7fe;
  --color-border-grey: #3e84e9;
  --color-grey-medium: #538ee2;
  --color-grey-dark : #4f6a91;
  --color-grey-light: #86b7fe;
  --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, 0, 0, 0.49);
  --color-mobile-nav-bg: rgba(81, 67, 56, 0.9);
  --color-box-shadow-subtle: #86b6fe72 ;

  /* Gradients */ 
  --gradient-game-nav: radial-gradient(100% 100% at 50% 0, #ffffff 0, #bcd7ff 44%, #94bfff 100%);
  --gradient-game-nav-active: radial-gradient(100% 100% at 50% 0, #ffffff 0, #86b7fe 44%, #7cb1ff 100%);
  --gradient-game-bg: #d6e7ff;
  --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;
}