/* Mandarin Study Hub — Soft Charcoal + Muted Coral */

/* =========================
   1. FONT
   ========================= */

@font-face {
  font-family: "Long Cang Web";
  src: url("./fonts/LongCang-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Font umum: utamakan font bergaya KaiTi untuk Hanzi */
:root {
  --msh-font-hanzi: "KaiTi", "楷体", "Kaiti SC", "STKaiti",
                    "KaiTi_GB2312", "AR PL UKai CN", serif;
}

/* Long Cang HANYA untuk area latihan menulis stroke */
.hanzi-writing,
.hanzi-writing *,
.hanzi-stroke-writing,
.hanzi-stroke-writing *,
.stroke-writing,
.stroke-writing *,
.stroke-canvas-label {
  font-family: "Long Cang Web", cursive !important;
  font-weight: 400;
}

/* Selain area menulis stroke, Hanzi menggunakan font KaiTi/mirip KaiTi */
.hanzi,
.hanzi-guide,
.hanzi-input,
.hanzi-text,
.hanzi-preview,
.hanzi-char,
.hanzi-character,
.hanzi-display,
.hanzi-word,
.hanzi-sentence,
.hanzi-example,
.hanzi-title,
.hanzi-mark,
.hanzi-pinyin,
ruby,
rt {
  font-family: var(--msh-font-hanzi);
  font-weight: 400;
}

/* =========================
   2. COLOR SYSTEM
   ========================= */

:root {
  color-scheme: dark;

  --msh-bg: #17191f;
  --msh-panel: #22252d;
  --msh-panel-2: #2a2d35;
  --msh-line: #393d46;
  --msh-text: #e6e4df;
  --msh-muted: #b0b1b5;
  --msh-accent: #c97868;
  --msh-accent-hover: #d58b7c;
  --msh-gold: #cbb58f;
  --msh-mint: #9fc4b2;
}

/* =========================
   3. BASE
   ========================= */

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--msh-bg) !important;
  color: var(--msh-text);
}

/* =========================
   4. TOP NAVIGATION
   ========================= */

.msh-topbar,
.msh-topbar * {
  box-sizing: border-box;
}

.msh-topbar {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  background: rgba(29, 31, 37, 0.94);
  border-bottom: 1px solid var(--msh-line);
  backdrop-filter: blur(14px);
}

.msh-topbar-inner {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.msh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--msh-text) !important;
  text-decoration: none !important;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: 0.95rem;
}

.msh-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #c97868;
  color: #241a18;
  font-family: var(--msh-font-hanzi);
  font-size: 20px;
  font-weight: 400;
}

.msh-brand small {
  display: block;
  font-size: 0.66rem;
  color: var(--msh-muted);
  letter-spacing: 0.08em;
  font-weight: 600;
}

.msh-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid #66524f;
  background: #393038;
  color: #f0e7df !important;
  text-decoration: none !important;
  font-size: 0.84rem;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 3px 10px #0002;
}

.msh-home:hover {
  background: #4a393c;
  border-color: #b17a70;
  transform: translateY(-1px);
}

.msh-home .msh-back-arrow {
  font-size: 1.05rem;
  line-height: 1;
}

/* =========================
   5. LINKS & FORM CONTROLS
   ========================= */

a {
  accent-color: var(--msh-accent);
}

a:not(.msh-brand):not(.msh-home) {
  text-underline-offset: 3px;
}

button,
input,
select,
textarea {
  accent-color: var(--msh-accent);
}

button {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

button:hover {
  border-color: #8a716b;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid #c97868 !important;
  outline-offset: 2px;
}

::selection {
  background: #c9786844;
}

/* =========================
   6. COMMON CARDS
   ========================= */

.card,
.quizcard,
.intro,
.story,
.story-card,
.panel,
.section-card,
.lesson,
.grammar-card,
.chapter,
.question-card,
.result-card,
.phrase-card {
  border-color: var(--msh-line);
}

/* =========================
   7. MOBILE
   ========================= */

@media (max-width: 560px) {
  .msh-topbar {
    min-height: 56px;
  }

  .msh-topbar-inner {
    width: calc(100% - 22px);
  }

  .msh-brand {
    font-size: 0.85rem;
  }

  .msh-brand small {
    font-size: 0.59rem;
  }

  .msh-home {
    padding: 7px 9px;
    font-size: 0.76rem;
  }
}