/* ========================================================
   逐點通 · 家教模式 · Design Tokens
   品牌來源：huikao101.com / AlexEdu feat/design-tokens
   --------------------------------------------------------
   使用：所有家教模式網頁 <link> 這支即可。
   ======================================================== */

:root {
  /* ===== 主色 ===== */
  --brand-amber-400: #E89F3B;
  --brand-amber-500: #D97706;    /* 主色（按鈕、連結、強調）*/
  --brand-amber-700: #B45309;    /* hover */
  --brand-cream:     #FEF3C7;    /* 點綴、卡片淺底 */
  --brand-cream-soft:#FEFBF1;    /* 頁面背景 */

  /* ===== 文字 ===== */
  --ink:         #1A1A18;   /* 主要文字 */
  --ink-soft:    #3F3F38;   /* 副文字 */
  --ink-mute:    #6B6B63;   /* 淺文字（slogan、meta）*/

  /* ===== 邊框 / 結構 ===== */
  --border:      #E7E5DE;
  --border-soft: #F4F2EB;
  --surface:     #FFFFFF;

  /* ===== 語意色 ===== */
  --success:     #16a34a;
  --danger:      #dc2626;
  --warning:     #d97706;

  /* ===== 難度 ===== */
  --diff-easy-bg:   #FFF7E6;
  --diff-easy-fg:   #B45309;
  --diff-medium-bg: #FEF3C7;
  --diff-medium-fg: #92400E;
  --diff-hard-bg:   #FEE2E2;
  --diff-hard-fg:   #991B1B;

  /* ===== 字體 ===== */
  --serif: 'Noto Serif TC', 'Source Han Serif TC', 'PingFang TC', serif;
  --sans:  'Noto Sans TC', system-ui, -apple-system, sans-serif;
  --mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* ===== 尺寸 ===== */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(26,26,24,.04);
  --shadow:    0 4px 14px rgba(217,119,6,.08);
  --shadow-lg: 0 8px 30px rgba(217,119,6,.12);
}

/* ===== Reset / Base ===== */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--brand-cream-soft);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container { max-width: 820px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

/* ===== Brand Bar（所有頁面頂部共用）===== */
.brand-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
}
.brand-link:hover .brand-name { color: var(--brand-amber-500); }
.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: .04em;
  transition: color .15s;
}
.brand-slogan {
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--ink-mute);
  letter-spacing: .08em;
  margin-top: 2px;
}
.brand-meta {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--ink-mute);
  letter-spacing: .02em;
}

/* ===== Breadcrumb ===== */
.crumb {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--ink-mute);
  margin-bottom: 1.25rem;
}
.crumb a {
  color: var(--brand-amber-500);
  text-decoration: none;
  cursor: pointer;
}
.crumb a:hover { text-decoration: underline; }
.crumb-sep { margin: 0 .5rem; opacity: .4; }

/* ===== Page Header ===== */
.page-title {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 .4rem;
  color: var(--ink);
  letter-spacing: .02em;
}
.page-subtitle {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

/* ===== Buttons ===== */
.btn {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  padding: .7rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.btn-primary {
  background: var(--brand-amber-500);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-amber-700); }
.btn-ghost {
  background: var(--surface);
  color: var(--ink-soft);
  border-color: var(--border);
}
.btn-ghost:hover {
  border-color: var(--brand-amber-500);
  color: var(--brand-amber-500);
}
.btn-row {
  display: flex;
  gap: .75rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

/* ===== Cards ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all .15s;
}
.card-hoverable { cursor: pointer; }
.card-hoverable:hover {
  border-color: var(--brand-amber-500);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* ===== Chips ===== */
.chip {
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem;
  padding: .2rem .65rem;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: .05em;
}
.chip-easy   { background: var(--diff-easy-bg);   color: var(--diff-easy-fg); }
.chip-medium { background: var(--diff-medium-bg); color: var(--diff-medium-fg); }
.chip-hard   { background: var(--diff-hard-bg);   color: var(--diff-hard-fg); }
.chip-done   { background: #ECFDF5; color: #15803D; }
.chip-wip    { background: #FEF3C7; color: #92400E; }
.chip-soon   { background: #F4F2EB; color: #6B6B63; }

@media (max-width: 600px) {
  .container { padding: 1.25rem 1rem 3rem; }
  .page-title { font-size: 1.5rem; }
  .brand-slogan { display: none; }
}