/* ============================================================
   KOKO · UI — Design System dùng chung cho các trang client
   Palette: Sumi #1A1614 · Shu #C62828 · Washi #F3EEE5
            Cha #8D6E63 · Kin #B08D57 · Base #FBFAF8
   Display: Noto Serif JP (mincho) · Body: Noto Sans JP
   Tất cả class prefix .koko- để không đụng style.css cũ.
   ============================================================ */
:root{
    --k-sumi:#1A1614; --k-shu:#C62828; --k-washi:#F3EEE5;
    --k-cha:#8D6E63;  --k-kin:#B08D57;  --k-base:#FBFAF8;
    --k-ink:#2b2522;  --k-muted:#6a615b;
    --k-serif:'Noto Serif JP','Noto Serif',serif;
    --k-sans:'Noto Sans JP',system-ui,sans-serif;
}

/* style.css đặt *{font-family:Noto Sans JP} & huỷ kế thừa,
   nên gán serif TRỰC TIẾP lên từng phần tử hiển thị */
.koko-serif,
.koko-title,.koko-display,.koko-num,.koko-kanji{ font-family:var(--k-serif); }

/* ---- Eyebrow (nhãn nhỏ + gạch vàng) ---- */
.koko-eyebrow{
    font-family:var(--k-sans); font-weight:500; font-size:.74rem;
    letter-spacing:.4em; text-transform:uppercase; color:var(--k-kin);
    display:inline-flex; align-items:center; gap:.9rem;
}
.koko-eyebrow::before{ content:""; width:32px; height:1px; background:currentColor; opacity:.8; }
.koko-eyebrow.is-center{ justify-content:center; }

/* ---- Tiêu đề mục (mincho + accent) ---- */
.koko-title{
    font-weight:600; line-height:1.2; color:var(--k-sumi);
    font-size:clamp(2rem,4vw,3rem); margin:1rem 0 0;
}
.koko-title .koko-kanji{ color:var(--k-cha); font-weight:500; margin-right:.5rem; }
.koko-lead{
    font-family:var(--k-sans); font-weight:300; font-size:1.08rem;
    line-height:1.95; color:var(--k-muted);
}

/* ---- Con dấu hanko ---- */
.koko-seal{
    --s:64px; width:var(--s); height:var(--s); flex:0 0 var(--s);
    display:grid; place-items:center; border-radius:8px;
    background:var(--k-shu); color:#fff; box-shadow:0 8px 24px rgba(198,40,40,.38);
    font-family:var(--k-serif); font-weight:700; font-size:1.6rem; line-height:1;
    transform:rotate(-6deg);
}

/* ---- Nút ---- */
.koko-btn{
    position:relative; font-family:var(--k-sans); font-weight:500; font-size:1rem;
    padding:1rem 2.2rem; border-radius:2px; text-decoration:none; letter-spacing:.02em;
    display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; border:none;
    transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,background .4s,color .4s,border-color .4s;
}
.koko-btn i{ transition:transform .4s; }
.koko-btn--primary{ background:var(--k-shu); color:#fff; overflow:hidden; }
.koko-btn--primary::after{ content:""; position:absolute; inset:6px; border:1px solid rgba(255,255,255,0); border-radius:1px; transition:inset .4s,border-color .4s; }
.koko-btn--primary:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(198,40,40,.45); color:#fff; }
.koko-btn--primary:hover::after{ inset:5px; border-color:rgba(243,238,229,.6); }
.koko-btn--primary:hover i{ transform:translateX(4px); }
.koko-btn--ghost{ background:transparent; color:var(--k-sumi); border:1px solid rgba(141,110,99,.5); }
.koko-btn--ghost:hover{ transform:translateY(-3px); border-color:var(--k-shu); color:var(--k-shu); }
.koko-btn--light{ background:transparent; color:var(--k-washi); border:1px solid rgba(243,238,229,.4); }
.koko-btn--light:hover{ transform:translateY(-3px); border-color:var(--k-kin); color:var(--k-kin); }

/* ---- Divider mảnh có dấu son ---- */
.koko-rule{ display:flex; align-items:center; gap:1rem; color:var(--k-cha); }
.koko-rule::before,.koko-rule::after{ content:""; height:1px; background:rgba(141,110,99,.4); flex:1; }
.koko-rule i{ color:var(--k-shu); }

/* ---- Focus rõ ràng (a11y) ---- */
.koko-scope a:focus-visible,
.koko-scope button:focus-visible{ outline:2px solid var(--k-kin); outline-offset:3px; border-radius:2px; }

@media (prefers-reduced-motion:reduce){
    .koko-scope *{ animation:none!important; transition:none!important; }
}