/* css/base.css */

/* 
base.css      tokens, fonts, body, footer
subpage.css   site-name, title, page-content, content-block
nav.css       burger + overlay (≈70 lines, one concern)
home.css      homepage only
pages/*.css   only what that page uniquely needs
*/

/* ============ 設計變數（改這裡就改全站） ============ */
:root {
    /* 顏色 */
    --ink: rgb(39, 34, 34);                 /* 主要文字色 */
    --ink-light: rgb(190, 173, 173);
    --bg: white;
    --pink-hover: rgb(233, 190, 195);
    --pink-active: rgba(228, 115, 124, 0.633);
    --pink-link: rgb(214, 113, 121);
    --blue-link: rgba(127, 174, 228, 0.9);
    --green-link: rgba(113, 182, 81, 0.849);

    /* 字型 */
    --font-en: "Ramaraja", serif;
    --font-ch: "Noto Serif TC", serif;
    --font-body: "Cormorant Garamond", serif;

    /* 質感（你的風格核心） */
    --stretch: scaleX(1.1);                 /* 橫向拉伸 */
    --blur-soft: 0.1px;
    --blur-mid: 0.5px;
    --blur-heavy: 1.5px;
    --op-faded: 0.3;
    --op-muted: 0.6;

    /* 間距與版面 */
    --gutter: 2rem;                         /* 頁面左右留白 */
    --footer-gap: 1rem;

    /* 子頁 header / burger */
    --b: 5rem;                              /* burger 尺寸 */
    --burger-right: 4vw;
    --nav-center: 4.2rem;                   /* 標題與 burger 的垂直中線 */
    --name-en-size: 1.6rem;
    --name-ch-size: 1.3rem;
    --title-size: 2rem;
    --ch-size: 0.86em;
}

/* 小螢幕只改變數，不用重寫規則 */
@media (max-width: 600px) {
    :root { --gutter: 2rem; }
}
@media (max-width: 380px) {
    :root {
        --b: 3.6rem;
        --burger-right: 6vw;
        --nav-center: 3.6rem;
        --name-en-size: 1.5rem;
        --name-ch-size: 1.2rem;
        --title-size: 1.8rem;
    }
}

/* ============ 基礎 ============ */
html {
    font-size: 62.5%;                       /* 1rem = 10px，全站固定 */
    overflow-x: clip;
    scrollbar-gutter: stable;
}
body {
    background: var(--bg);
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-body); 
    color: var(--ink);
}

/* ============ 字型 class ============ */
.f-en   { font-family: var(--font-en); font-weight: 400; }
.f-ch   { font-family: var(--font-ch); font-weight: 658; }
.ch   { font-family: var(--font-ch); font-weight: 400; font-size: var(--ch-size);}
.f-body { font-family: var(--font-body); font-optical-sizing: auto; font-weight: 400; }

/* ============ 頁尾 ============ */
footer { margin-top: auto; padding-top: var(--footer-gap); }
.copyright-text {
    font-size: 12px;
    transform: var(--stretch);
    letter-spacing: 0.1rem;
    margin: 1rem auto 1rem;
    opacity: var(--op-faded);
    transition: opacity 0.6s ease-in-out;
}
@media (hover: hover) {
    .copyright-text:hover { opacity: 1; transition-duration: 0.2s; }
}

/* ============ 共用連結樣式 ============ */
.link-event  { color: var(--ink); text-decoration: underline rgba(39,34,34,.3) 1px; text-underline-offset: .2em; }
.link-news   { font-weight: bold; color: var(--blue-link); text-decoration: none; }
.link-review { font-weight: bold; color: var(--green-link); text-decoration: none; }