/* variables.css - 核心變數與全域設定 */

@property --glare-angle {
    syntax: '<angle>';
    initial-value: 135deg;
    inherits: true;
}

:root {
    color-scheme: light dark;
    --glare-angle: 135deg;

    /* --- 卡片物理尺寸設定 --- */
    --card-width: 94%;
    --card-radius: 32px; 
    --card-ratio: 1.586 / 1; 
    --bottom-anchor: calc(10px + env(safe-area-inset-bottom));

    /* --- 顏色變數：預設為深色模式 --- */
    --bg-color: #000000;       
    --text-main: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --search-bg: rgba(28, 28, 30, 0.8);
    --search-border: rgba(255, 255, 255, 0.08);
    --icon-color: #ffffff;
    --border-color: rgba(255, 255, 255, 0.12);
    --tag-bg: rgba(255, 255, 255, 0.15);
    --card-text-color: #ffffff; 
    --text-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.2);

    /* --- 模擬光追陰影系統 (深色模式) --- */
    --ray-shadow-resting: 
        0 -2px 10px 1px rgba(0, 0, 0, 0.5),
        0 -10px 30px 1px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.15); 

    --ray-shadow-active: 
        0 20px 50px 1px rgba(0, 0, 0, 0.6),
        0 5px 15px 1px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset; 

    --ray-shadow-fixed: 
        0 -10px 40px 1px rgba(0, 0, 0, 0.5), 
        0 -2px 10px 1px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);

    /* --- 字體與物理參數 --- */
    --font-main: "SF Pro JP", "SF Pro Display", "Hiragino Sans", "Hiragino Kaku Gothic ProN", 
                 "Yu Gothic Medium", "Yu Gothic", "Meiryo", 
                 "Noto Sans JP", -apple-system, BlinkMacSystemFont, 
                 "Segoe UI", Roboto, sans-serif;
    --ios-snap: cubic-bezier(0.16, 1, 0.3, 1); 
    --active-bounce: cubic-bezier(0.23, 1, 0.32, 1); 
    --premium-ease: cubic-bezier(0.19, 1, 0.22, 1);
    --impact-bounce: cubic-bezier(0.25, 1, 0.5, 1);
    --spring-release: cubic-bezier(0.34, 1.3, 0.64, 1);
    --apple-spring: cubic-bezier(0.25, 1, 0.5, 1);
    --elastic-out: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- 毛玻璃變數 --- */
    --mask-blur: 45px;       
    --mask-opacity: 0.35;    
    --mask-saturate: 160%;   
    --mask-brightness: 0.75;
    --mask-contrast: 1.1;
    --bg-content-blur: 12px; 
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-color: #f2f2f7 !important;   
        --text-main: #000000 !important;
        --text-secondary: rgba(0, 0, 0, 0.6) !important;
        --search-bg: rgba(255, 255, 255, 0.8) !important;
        --search-border: rgba(255, 255, 255, 0.08);
        --icon-color: #000000 !important;
        --border-color: rgba(255, 255, 255, 0.1) !important;
        --tag-bg: rgba(0, 0, 0, 0.08) !important;
        --text-shadow-subtle: 0 2px 5px rgba(0, 0, 0, 0.6) !important;

        --ray-shadow-resting: 
            0 -4px 12px 1px rgba(0, 0, 0, 0.2),
            0 -12px 24px 0px rgba(0, 0, 0, 0.32),
            0 0 0 1px rgba(0, 0, 0, 0.15);            

        --ray-shadow-active: 
            0 25px 50px 1px rgba(0, 0, 0, 0.25),
            0 10px 20px 0px rgba(0, 0, 0, 0.15);      

        --ray-shadow-fixed: 
            0 -15px 40px 1px rgba(0, 0, 0, 0.15),
            0 -5px 15px 0px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);

        --mask-brightness: 1.0; 
        --mask-opacity: 0;
    }
}

/* ==========================================================================
   PWA (加入主畫面) 專屬設定
   ========================================================================== */
@media (display-mode: standalone) {
    :root {
        /* 讓卡片的最下緣「完美騎在 Home 條的頭上」 */
        --bottom-anchor: env(safe-area-inset-bottom);
        
        /* 💡 提示：如果你覺得完全貼齊視覺上太緊繃，可以加 4px~8px 的微距，例如：
           --bottom-anchor: calc(6px + env(safe-area-inset-bottom)); */
    }
}