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

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

  /* 主要文字顏色 */
  --color-text-primary: #e1e1e1;
  --color-text-secondary: #E55A2B;
  --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: #292929;

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

  /* 登入按鈕顏色 */
  --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, #ff6229 0, #ff6b35 44%, #7b2100 100%);
  --gradient-btn-login-hover: radial-gradient(100% 100% at 50% 0, #fda281 0, #ff6b35 44%, #c53e0d 100%);
  --gradient-btn-register: radial-gradient(100% 100% at 50% 0, #7e7e7e 0, #626262 44%, #393939 100%);
  --gradient-btn-register-hover: radial-gradient(100% 100% at 50% 0, #989898 0, #848282 44%, #616161 100%);

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

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

  /* 邊框與灰色 */
  --color-border-light: #ff6b35;
  --color-border-grey: #2a2a2a;
  --color-grey-medium: #3e3e3e;
  --color-grey-dark : #933a19;
  --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, 0, 0, 0.49);
  --color-mobile-nav-bg: rgba(81, 67, 56, 0.9);
  --color-box-shadow-subtle: rgba(255, 81, 0, 0.247);

  /* Gradients */
  --gradient-main-bg: linear-gradient(135deg, #f8f7f4, #f7f2f0, #ece7de);
  --gradient-navbar: linear-gradient(180deg, #ffffff 80%, #c6c6c6 100%);
  --gradient-marquee: linear-gradient(180deg, #ce3902 20%, #FF6B35 40%, #ff956e 50%, #FF6B35 70%, #d83a01 100%);
  --gradient-marquee-alt: linear-gradient(180deg, #ce3902 20%, #FF6B35 40%, #ff956e 50%, #FF6B35 70%, #d83a01 100%);

  --gradient-game-nav: radial-gradient(100% 100% at 50% 0, #808080 0, #494949 44%, #000000 100%);

  --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;
}