/* ============================================
   官網共用 :root 變數（卡 #1077）
   給 /try/ 頁面殼（farbar-ai-try/shell.template.html）用，供 shared/header-nav.css、
   shared/contact-section.css 與 farbar-ai-try/try-shell.css 使用。
   數值照抄後台系統頁 farbarAiSystem-responsive.css，shared/__tests__/site-vars.test.js 只與該頁逐條比對。
   其他頁的樣式表各自宣告變數（既有狀態）：首頁與專案服務頁的 --feature-gap、--radius-md 本來就不同，
   與 header 及聯絡表單無關。
   斷點順序照抄來源：960／768／600 寫在 375 之後，同時命中時後寫的勝出（例：寬 360px 時 --scale 取 600 的 0.55）。
   ============================================ */
:root {
    /* 色彩系統 */
    --primary-gradient: linear-gradient(90deg, #1fc8ab, #5e8dfe);
    --primary-teal: #1fc8ab;
    --primary-blue: #5e8dfe;
    --bg-dark: #06161a;
    --bg-darker: #061519;
    --text-white: #fff;
    --text-gray: #c7c7c7;
    --text-muted: #63657e;
    --text-placeholder: #818182;
    --btn-purple: #503ae7;
    --btn-purple-hover: #6b52f5;
    --border-light: #dce4ec;

    /* 縮放比例 (1920px = 0.9) - 全域縮放 */
    --scale: 0.9;

    /* 間距系統 - 基於 1920px，用 max() 確保最小間距 */
    --spacing-xs: max(4px, calc(8px * var(--scale)));
    --spacing-sm: max(8px, calc(12px * var(--scale)));
    --spacing-md: max(12px, calc(16px * var(--scale)));
    --spacing-lg: max(16px, calc(24px * var(--scale)));
    --spacing-xl: max(20px, calc(32px * var(--scale)));
    --spacing-2xl: max(24px, calc(48px * var(--scale)));
    --spacing-3xl: max(32px, calc(64px * var(--scale)));
    --spacing-4xl: max(40px, calc(80px * var(--scale)));

    /* 字體大小 - 基於 1920px，用 max() 與 round() 確保最小可讀字級並對齊像素 */
    --font-xs: max(12px, round(nearest, calc(14px * var(--scale)), 2px));
    --font-sm: max(12px, round(nearest, calc(16px * var(--scale)), 2px));
    --font-md: max(14px, round(nearest, calc(18px * var(--scale)), 2px));
    --font-lg: max(14px, round(nearest, calc(20px * var(--scale)), 2px));
    --font-xl: max(16px, round(nearest, calc(24px * var(--scale)), 2px));
    --font-2xl: max(18px, round(nearest, calc(26px * var(--scale)), 2px));
    --font-3xl: max(20px, round(nearest, calc(28px * var(--scale)), 2px));
    --font-4xl: max(24px, round(nearest, calc(40px * var(--scale)), 2px));
    --font-5xl: max(28px, round(nearest, calc(48px * var(--scale)), 2px));

    /* 容器與尺寸 */
    --container-max: calc(1200px * var(--scale));
    --container-padding: calc(20px * var(--scale));
    --features-max-width: calc(1360px * var(--scale));
    --feature-image-width: calc(580px * var(--scale));
    --feature-image-height: calc(400px * var(--scale));
    --feature-gap: calc(44px * var(--scale));
    --feature-content-gap: calc(48px * var(--scale));

    /* 圓角 */
    --radius-sm: calc(5px * var(--scale));
    --radius-md: calc(25px * var(--scale));
    --radius-lg: calc(32px * var(--scale));

    /* 導航列 */
    --nav-height: calc(80px * var(--scale));
    --nav-padding: calc(36px * var(--scale));
    --logo-height: calc(36px * var(--scale));

    /* 過渡動畫 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

@media (max-width: 1440px) {
    :root {
        --scale: 0.75;
        --container-padding: 24px;
        --nav-padding: 28px;
    }
}

@media (max-width: 1366px) {
    :root {
        --scale: 0.71;
        --container-padding: 22px;
        --nav-padding: 24px;
    }
}

@media (max-width: 1200px) {
    :root {
        --scale: 0.625;
        --container-padding: 20px;
        --nav-padding: 20px;
    }
}

@media (max-width: 1080px) {
    :root {
        --scale: 0.56;
        --container-padding: 20px;
        --nav-padding: 20px;
        --feature-gap: calc(60px * var(--scale));
    }
}

@media (max-width: 375px) {
    :root {
        --scale: 0.5;
        --container-padding: 16px;
        --nav-padding: 16px;
    }
}

@media (max-width: 960px) {
    :root {
        --scale: 0.52;
        --nav-height: 70px;
    }
}

@media (max-width: 768px) {
    :root {
        --scale: 0.48;
        --nav-height: 64px;
    }
}

@media (max-width: 600px) {
    :root {
        --scale: 0.55;
        --nav-height: 56px;
    }
}