/* 发现非洲 / Discover Africa — design tokens (SINGLE style source).
   Distilled from TO Trade v4 (trade-mcp landing). New pages MUST reference this
   file and use these variables — no self-styling, no hard-coded colours/fonts.

   Two layout modes:
     .mode-facade  门面页  — 炭黑底金字   (login / dashboard)
     .mode-work    作业页  — 暖米白底炭黑字 + 大按钮 (weigh / payment / close)
*/
:root {
  /* --- palette (trade v4) --- */
  --charcoal:   #2b2b2b;   /* 炭黑 */
  --gold:       #a47b4e;   /* 金 (深) */
  --gold-2:     #bb9259;   /* 金 (亮) */
  --paper:      #faf6f0;   /* 暖米白 (作业页底) */
  --paper-2:    #fffdf9;   /* 卡片底 */
  --ink:        #2b2b2b;   /* 作业页正文 */
  --cream:      #e7e2d8;   /* 门面页正文 */
  --cream-dim:  #a8a299;   /* 门面页次要 */
  --line:       #e8e0d3;   /* 米白分隔线 */
  --line-gold:  rgba(164,123,78,.35);
  --red:        #b5443a;   /* 红卡 / 错误 */
  --ok:         #4e7a4e;

  /* --- type (trade v4: Cormorant Garamond + Noto Serif SC + JetBrains Mono) --- */
  --font-serif: 'Cormorant Garamond', 'Noto Serif SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', serif;
  --font-cjk:   'Noto Serif SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* --- spacing / radius --- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;
  --gap:  16px;
  --touch: 56px;               /* 作业页大按钮/输入高度 (手套/户外可点) */
  --shadow: 0 6px 24px rgba(43,43,43,.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
img { display: block; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-cjk);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.serif { font-family: var(--font-serif); }
.mono  { font-family: var(--font-mono); }
.hr-gold { width: 44px; height: 1px; background: var(--gold); opacity: .7; }
.eyebrow {
  font-size: 12px; letter-spacing: 5px; color: var(--gold-2);
  text-transform: uppercase; font-weight: 400;
}

/* ============================= 门面页 (facade) ============================= */
.mode-facade {
  background: var(--charcoal);
  color: var(--cream);
  min-height: 100vh;
}
.mode-facade .brand {
  font-family: var(--font-serif);
  color: #f4efe5;
  letter-spacing: 4px;
  font-weight: 600;
}
.mode-facade .brand .cn { color: var(--gold-2); font-family: var(--font-cjk); }
.mode-facade .muted { color: var(--cream-dim); }
.mode-facade .panel {
  border: 1px solid var(--line-gold);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.14);
}

/* ============================= 作业页 (work) ============================== */
.mode-work {
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
}
.mode-work .card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.mode-work label { font-size: 13px; color: #8b8072; letter-spacing: .5px; }
.mode-work input, .mode-work select {
  height: var(--touch);
  font-size: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  padding: 0 14px;
  width: 100%;
}

/* big touch button — both modes */
.btn {
  height: var(--touch);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  background: var(--gold);
  color: #fff;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  padding: 0 22px;
}
.btn:hover { background: var(--gold-2); }
.btn-ghost {
  background: transparent;
  color: var(--gold-2);
  border: 1px solid var(--gold-2);
}
.btn-ghost:hover { background: var(--gold-2); color: var(--charcoal); }

.lang-switch { display: flex; gap: 6px; }
.lang-switch button {
  background: transparent; border: 1px solid var(--line-gold);
  color: var(--cream-dim); border-radius: var(--r-sm);
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.lang-switch button.active { color: var(--gold-2); border-color: var(--gold-2); }