/* CSS Variables — 設計 token 集中管理 */
/* Arena Forge 主題：琥珀橙（PvP 主色）＋ 翠綠（SMP 輔色）＋ 鋼鐵藍灰 */

:root {
    /* 主色調 - 琥珀橙 (Ember Orange)：品牌與 PvP 分流 */
    --primary-color: #F97316;
    --primary-light: #FB923C;
    --primary-dark: #C2410C;
    --primary-glow: rgba(249, 115, 22, 0.35);
    --primary-glow-soft: rgba(249, 115, 22, 0.12);
    --primary-tint: rgba(249, 115, 22, 0.07);
    --primary-border: rgba(249, 115, 22, 0.25);

    /* 分流色：PvP 沿用主色、SMP 用翠綠 */
    --pvp-color: var(--primary-color);
    --pvp-tint: var(--primary-tint);
    --pvp-border: var(--primary-border);
    --smp-color: #34D399;
    --smp-light: #6EE7B7;
    --smp-tint: rgba(52, 211, 153, 0.08);
    --smp-border: rgba(52, 211, 153, 0.25);

    /* 強調色 - 鋼鐵藍灰 (Steel Blue) */
    --accent-color: #94A3B8;
    --accent-glow: rgba(148, 163, 184, 0.3);

    /* 背景色 - 黑曜石深邃 */
    --bg-dark: #08080E;
    --bg-mid: #0E0E16;
    --bg-card: #12121F;
    --bg-card-hover: #1A1A2E;
    --bg-section: #0A0A14;
    --bg-overlay: rgba(8, 8, 14, 0.78);
    --bg-overlay-strong: rgba(8, 8, 14, 0.96);

    /* 文字顏色 */
    --text-main: #F5F3FF;
    --text-light: #E2E8F0;
    --text-muted: #A1A1AA;
    --text-subtle: #6B7280;

    /* 語意色 */
    --color-online: #4ADE80;
    --color-online-glow: rgba(74, 222, 128, 0.25);
    --color-offline: #52525B;
    --color-violation: #F87171;
    --border-violation: rgba(248, 113, 113, 0.2);

    /* 邊框和陰影 */
    --border-color: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.12);
    --border-color-hover: rgba(249, 115, 22, 0.3);
    --border-glass: rgba(255, 255, 255, 0.06);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.6);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(249, 115, 22, 0.15);
    --shadow-glow: 0 0 40px rgba(249, 115, 22, 0.12);

    /* 漸層 */
    --gradient-primary: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
    --gradient-text: linear-gradient(135deg, #FDBA74 0%, #F97316 100%);
    --gradient-smp: linear-gradient(135deg, #6EE7B7 0%, #34D399 100%);

    /* 斜切角：卡片與按鈕共用的競技感切角 */
    --cut-sm: 8px;
    --cut-md: 16px;
    --clip-cut-sm: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
    --clip-cut-md: polygon(0 0, calc(100% - var(--cut-md)) 0, 100% var(--cut-md), 100% 100%, var(--cut-md) 100%, 0 calc(100% - var(--cut-md)));

    /* 字體 */
    --font-heading: 'Rajdhani', 'Noto Sans TC', sans-serif;
    --font-body: 'Noto Sans TC', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* 間距 */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    --spacing-section: 8rem;
    --page-gutter: clamp(1rem, 5vw, 4rem);
    --content-width: 1180px;

    /* 過渡動畫 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* 斷點（僅供文件參考，media query 不能讀變數） */
    --breakpoint-xs: 480px;
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;

    /* 導航欄 */
    --nav-height: 70px;
    --nav-height-mobile: 60px;

    /* Z-index 層級 */
    --z-nav: 1000;
    --z-overlay: 999;
    --z-toast: 9999;

    /* 圓角 */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;
}