/* =========================================================
   Google Fonts
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;700&display=swap');


/* =========================================================
   Font Variables (directly usable in your existing CSS)
   ========================================================= */
:root {
    --ft-t1: 'Outfit','DM Sans','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
    --ft-t2: 'Outfit','DM Sans','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
    --ft-b1: 'DM Sans','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
    --ft-b2: 'DM Sans','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
    --ft-nav: 'DM Sans','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
}

:root {
    --ft-xs: 60%;
    --ft-s: 80%;
    --ft-m: 14px;
    --h1: 300%; 
    --h2: 250%; 
    --h3: 200%; 
    --h4: 250%; 
    --h5: 100%; 
    --h6: 100%; 

    --hclr: #000;
    --bdclr: #000;
}

body.dark-theme {
    --hclr: #fff;
    --bdclr: #ccc; 
}

.body{
    font-weight: 500;
}

@media (max-width: 767px) {
    :root { 
        --ft-m: 14px; 

        --ft-xs: 60%;
        --ft-s: 80%; 
        --h4: 210%;
        /* --h1: 260%; 
        --h2: 210%; 
        --h3: 160%; 
         
        --h5: 120%; 
        --h6: 100%;  */
    }
} 

.ft1 {
    font-family: var(--ft-t1);
}
.ft2 {
    font-family: var(--ft-t2);
}
.ft3 {
    font-family: var(--ft-t3);
}
.fb1 {
    font-family: var(--ft-b1);
}
.fb2 {
    font-family: var(--ft-b2);
}
.fb3 {
    font-family: var(--ft-b3);
}
h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 { 
    --tt: initial;
    font-family: var(--ft-t1); 
    line-height: 1.2;
    text-transform: var(--tt);
    color: var(--hclr)
}
h1, h2, h3,
h4, h5, h6 {
    --m: 0 0 21px; 
    margin: var(--m); 
}
h1, .h1{ 
    font-size: var(--h1);  
}
h2, .h2{ 
    font-size: var(--h2);  
}
h3, .h3{ 
    font-size: var(--h3);  
}
h4, .h4{ 
    font-size: var(--h4);  
}
h5, .h5{ 
    font-size: var(--h5);  
}
h6, .h6{ 
    font-size: var(--h6);  
}
p {
    margin: 0 0 0;
}
p + p,
ul + p,
ol + p {
    margin: 15px 0 0;
}