:root {
    /* 常用色號 */
    --light:  #fff;
    --dark:   #000000;
    --pink:   #ff1b9a;
    --purple:   #FF00FF;
    --red:    #ff0000;
    --blue:   #4848FF;
    --gray:   #868686;
    --yellow: #fde49c;
    --brown:  #fda591;
    --orange: #fc9d00;
    --gray:   #a19d9d;
    /* 特殊色號 */
    --special-red:  #d9564f;
    --light-second: #e0e0e0;
    --blue-second:  #3D85C6;
    --title-blue:   #4EA1E9;
    --dark-gray:    #545454;
    /*
        若要新增可在自行增加
        格式: 
        --自定義名稱: 色碼 ;
     */

    /* ----------字體--------------- */
    --fs-family-secondary: 'Noto Serif JP', serif;
    /* 文字大小 */
    /* 基礎值為16px */
    --fs-normal: 16px;
    /* 16 * 2.5  = 40*/
    --fs-xxl: calc(var(--fs-normal) *2.5);
    /* 16 * 2.25 = 36*/
    --fs-xl:  calc(var(--fs-normal) *2.25);
    /* 16 * 2    = 32 */
    --fs-l:   calc(var(--fs-normal) *2);
    /* 16 * 1.75 = 28 */
    --fs-m:   calc(var(--fs-normal) *1.75);
    /* 16 * 1.5  = 24 */
    --fs-s:   calc(var(--fs-normal) *1.5);
    /* 16 * 1.25  = 20 */
    --fs-xs:  calc(var(--fs-normal) *1.25);
    /* 16 * 0.75  = 12*/
    --fs-xxs: calc(var(--fs-normal) *.75);

    /* 特殊字距 */
    /* 16 * 3.5 = 56*/
    --fs-big: calc(var(--fs-normal) *3.5);
    --fs-18: 18px;
    /*
        如果上述太過複雜，可自行調整 
        EX: --fs-xxl: 40px; (以此類推)
    */
    /* 文字粗體 */
    --fw-600: 600;
}

/* 如何導入上方總設定內容 ??
    跟一般寫CSS差不多，在css樣式的值，使用 【 var(自定義設定) 】即可
    EX: 
    .text{
        color: var(--light)
    }
*/