/* ============================================================
   Theme · Pine
   light mode 鼠尾草绿 + 大跨度渐变 + 多绿调色板
   不要 dark mode！渐变渐变渐变！
   ============================================================ */

:root {
  /* 中部+右侧再深一档 */
  --bg-base:      #6E8954;
  --bg-elevated:  #84A06A;
  --bg-sunk:      #5A7444;
  --bg-tinted:    #688350;

  /* 深墨绿字（白底上保对比） */
  --ink-1:        #1F2A1F;
  --ink-2:        #3D4D3D;
  --ink-3:        #6A7B65;
  --ink-4:        #9CAA94;

  /* 主色：绿 monochromatic 大跨度 */
  --blue-50:      #EAF2DD;
  --blue-100:     #D5E2BF;
  --blue-200:     #B5C8A5;
  --blue-300:     #8FAA80;
  --blue-400:     #6B8C5C;
  --blue-500:     #557247;
  --blue-600:     #44593A;
  --blue-700:     #36472E;
  --blue-800:     #283725;
  --blue-900:     #1A241B;

  --accent:       #557247;
  --accent-soft:  rgba(85,114,71,0.14);
  --moss:         #557247;
  --rose:         #8B9E70;

  --hairline:        rgba(31,42,31,0.08);
  --hairline-strong: rgba(31,42,31,0.14);
  --separator:       #B5C8A5;
}

html, body {
  background: #6E8954 !important;
  color: #1F2A1F !important;
  /* 中部+右侧加深 */
  background-image:
    radial-gradient(ellipse 75% 60% at 5% 8%,    rgba(74,98,62,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 78% 65% at 100% 100%, rgba(60,80,50,0.78) 0%, transparent 65%),
    radial-gradient(ellipse 60% 55% at 92% 5%,   rgba(50,70,42,0.80) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 5% 95%,   rgba(31,42,31,0.60) 0%, transparent 60%),
    linear-gradient(135deg, #5A7444 0%, #6E8954 50%, #4E6840 100%) !important;
}

/* 单层实色卡片 — 不透明，无毛玻璃（消除区块间重绘抖动） */
.card {
  background: #F0F4E9 !important;
  border: 1px solid rgba(143,170,128,0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(85,114,71,0.06),
    0 1px 2px rgba(31,42,31,0.04),
    0 12px 36px -8px rgba(85,114,71,0.18) !important;
}
.card:hover {
  background: #F6F9F0 !important;
  border-color: rgba(143,170,128,0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(85,114,71,0.08),
    0 8px 24px rgba(85,114,71,0.14),
    0 24px 60px -12px rgba(85,114,71,0.26) !important;
}

.nav-item.active {
  background: linear-gradient(135deg, #557247, #283725) !important;
  color: #EAF2DD !important;
  box-shadow: 0 4px 14px rgba(85,114,71,0.42) !important;
}

/* ============================================================
   Dashboard 多绿调色板
   ============================================================ */

.pill {
  background: rgba(143,170,128,0.20) !important;
  color: #36472E !important;
}

.cal-cell {
  background: rgba(234,242,221,0.55) !important;        /* 极浅鼠尾绿 */
}
.cal-cell:hover {
  background: rgba(181,200,165,0.65) !important;        /* 中浅绿 */
}
.cal-cell.weekend {
  background: rgba(143,170,128,0.32) !important;        /* 苔绿 */
}
.cal-cell.today {
  background: linear-gradient(135deg, #8FAA80, #36472E) !important;
  border: 1.5px solid #283725 !important;
  box-shadow: 0 6px 18px -4px rgba(54,71,46,0.45) !important;
}
.cal-cell.today .cal-num,
.cal-cell.today .cal-amount {
  color: #F5F8EE !important;
}
.cal-cell.today .cal-dot {
  background: #EAF2DD !important;
}

.event-block {
  background: rgba(143,170,128,0.18) !important;
  border-left: 3px solid #8FAA80 !important;
}
.event-block.terra {
  background: rgba(107,140,92,0.22) !important;
  border-left-color: #557247 !important;
}
.event-block.moss {
  background: rgba(85,114,71,0.22) !important;
  border-left-color: #36472E !important;
}
.event-block.plum {
  background: rgba(181,200,165,0.32) !important;
  border-left-color: #6B8C5C !important;
}

.mood-orb {
  background:
    radial-gradient(circle at 28% 24%, rgba(245,251,235,0.95), transparent 38%) !important,
    radial-gradient(circle at 70% 80%, #1F2A1F, transparent 60%) !important,
    linear-gradient(135deg, #D5E2BF, #557247 45%, #1A241B) !important;
  box-shadow:
    inset -2px -3px 6px rgba(31,42,31,0.30),
    inset 1px 1px 2px rgba(255,255,255,0.55),
    0 4px 14px rgba(85,114,71,0.42) !important;
}

.progress-fill {
  background: linear-gradient(90deg, #8FAA80, #44593A) !important;
}

.time-dot.active {
  background: #557247 !important;
  border-color: #557247 !important;
  box-shadow: 0 0 0 4px rgba(85,114,71,0.22) !important;
}
.time-dot.done {
  background: #8FAA80 !important;
  border-color: #8FAA80 !important;
}

/* Hand 强调字 — vibrant 中绿 */
.hand {
  color: #557247 !important;
}

.stat-num {
  color: #1F2A1F !important;
}

/* Cards 不同 nth-child 微弱不同 tint（单层实色，奇偶交替） */
.card:nth-of-type(odd) {
  background: #F2F6EC !important;
}
.card:nth-of-type(even) {
  background: #ECF1DE !important;
}

/* ============================================================
   Pine 字色 token override
   思路：直接覆盖 design-tokens.css 的 ink 系列，
   让所有 var(--ink-*) / var(--ink) / var(--muted) 自动变深，
   不用 selector hack。
   ============================================================ */

:root {
  /* Ink series 全部加深 (medium sage 底上保 contrast) */
  --ink-1: #14201A;          /* 主文字 — 极深墨绿，几乎黑 */
  --ink-2: #2C3D2D;          /* 二级文字 */
  --ink-3: #36452C;          /* 三级 / muted — 加深，绿底上看得清 */
  --ink-4: #566848;          /* placeholder */

  /* Alias 也同步（旧 inline style 用的 var 名）
     用 !important 压过各页 inline :root 里残留的暖米色 (#A89684 等)，
     否则灰字在绿底上看不清。 */
  --ink:        var(--ink-1) !important;
  --ink-soft:   var(--ink-2) !important;
  --muted:      var(--ink-3) !important;

  /* 强 contrast 用于关键文字 */
  --ink-strong: #0A140F;
}

/* ============================================================
   全局字色 + 字号微调（覆盖 inline style）
   ============================================================ */

/* Body 默认字色 */
html, body {
  color: var(--ink-1) !important;
}

/* 输入框提示字（placeholder）—— 绿底上要看得清 */
::placeholder { color: var(--ink-4) !important; opacity: 1 !important; }
::-webkit-input-placeholder { color: var(--ink-4) !important; opacity: 1 !important; }

/* Hero 大字 (display) — 极深 + 字重加强 */
.display {
  color: var(--ink-strong) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

/* Stat numbers (英文数字) — 深墨绿 */
.stat-num {
  color: var(--ink-1) !important;
}

/* Hand 强调字（手写体 Caveat）— body 上用深绿，card 内保持深绿 */
.hand {
  color: #2C4A2A !important;
  font-weight: 500 !important;
}

/* Label (uppercase mono 小字) — 加深 + 提 weight + 减少 letter-spacing */
.label {
  color: var(--ink-2) !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
}

/* Serif-en italic (Cormorant Garamond) — 装饰英文 */
.serif-en {
  color: var(--ink-2);
}

/* Pill — 加深字色 + 微调 background contrast */
.pill {
  background: rgba(54,71,46,0.14) !important;
  color: var(--ink-strong) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}

/* ============================================================
   inline style 写死了 color: var(--ink-*) 的元素自动得到新色
   （因为 alias 已经在 :root 重映射）— 不用额外规则
   ============================================================ */

/* 但是有些地方用了 hardcoded 颜色（var 之外），单独覆盖 */
/* 例如 inline style="color: var(--caramel)" 之类 */
[style*="color: var(--caramel)"] {
  color: var(--ink-strong) !important;
}
[style*="color: var(--terracotta)"] {
  color: var(--ink-strong) !important;
}

/* Footer 小字 */
footer {
  color: var(--ink-2) !important;
}
footer .hand {
  color: var(--ink-strong) !important;
}

/* Nav item 字色 */
.nav-item {
  color: var(--ink-2) !important;
  font-weight: 500 !important;
}
.nav-item.active {
  color: #F0F5EB !important;
}

/* Card 内的字默认就是 var(--ink-1) 已是深墨绿，不用额外处理 */