/* ============================================================
   Daily Canvas · Design Tokens
   Theme: iOS 17 + Slate Blue Monochromatic (Low Saturation)
   ============================================================ */

:root {
  /* ===== Backgrounds (multi-layer system, iOS materials) ===== */
  --bg-base:      #F2F3F7;   /* page background, faint blue tint */
  --bg-elevated:  #FFFFFF;   /* cards, sheets — pure white floats */
  --bg-sunk:      #E8EBF1;   /* inputs, code, recessed */
  --bg-tinted:    #EEF1F6;   /* hover, soft accent zone */

  /* ===== Glass (frosted overlays, iOS 17 vibrancy) ===== */
  --glass-bg:     rgba(255,255,255,0.72);
  --glass-bg-strong: rgba(255,255,255,0.85);
  --glass-border: rgba(255,255,255,0.6);
  --glass-blur:   blur(20px);

  /* ===== Text (against light glass on pale blue wallpaper) ===== */
  --ink-1:        #1A2333;   /* primary text + headings */
  --ink-2:        #4A5566;   /* secondary */
  --ink-3:        #8895A6;   /* tertiary, muted */
  --ink-4:        #B4BFCB;   /* placeholder */

  /* ===== Slate Blue (mono accent, low saturation) ===== */
  --blue-50:      #EEF3F8;
  --blue-100:     #DCE5EE;
  --blue-200:     #B8C8DA;
  --blue-300:     #8FA8C3;
  --blue-400:     #6D8AA9;
  --blue-500:     #5B7A95;  /* primary brand */
  --blue-600:     #4A6680;
  --blue-700:     #3D5670;  /* hover, important */
  --blue-800:     #2C3F54;
  --blue-900:     #1F2D3E;

  /* ===== Warm accent (single, used sparingly) ===== */
  --accent:       #C49A6C;   /* caramel — only for handwriting + select CTAs */
  --accent-soft:  rgba(196,154,108,0.12);

  /* ===== Semantic ===== */
  --moss:         #5C7567;   /* success/positive — desaturated */
  --rose:         #B4736C;   /* warning/important — desaturated */

  /* ===== Hairlines (very subtle, iOS uses these instead of borders) ===== */
  --hairline:        rgba(26,31,43,0.08);
  --hairline-strong: rgba(26,31,43,0.14);
  --separator:       #E5E8EE;

  /* ===== Radius (squircle, iOS 17 continuous-corner feel) ===== */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;     /* inputs */
  --r-lg:   18px;     /* buttons, pills */
  --r-xl:   24px;     /* cards */
  --r-2xl:  32px;     /* hero cards, modals */
  --r-full: 9999px;

  /* ===== Shadow (iOS layered elevation — soft, multi-stop) ===== */
  --shadow-1: 0 1px 2px rgba(26,31,43,0.04), 0 2px 8px rgba(26,31,43,0.04);
  --shadow-2: 0 1px 3px rgba(26,31,43,0.05), 0 8px 24px -4px rgba(26,31,43,0.08);
  --shadow-3: 0 4px 12px rgba(26,31,43,0.06), 0 24px 48px -12px rgba(26,31,43,0.12);
  --shadow-pop: 0 8px 32px rgba(91,122,149,0.18), 0 2px 6px rgba(26,31,43,0.06);

  /* ===== Spring transitions (iOS spring physics feel) ===== */
  --spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:    160ms;
  --t-base:    260ms;
  --t-slow:    420ms;

  /* ===== Typography ===== */
  --font-sans:  -apple-system, 'SF Pro Display', 'SF Pro Text', BlinkMacSystemFont, 'Inter', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-serif: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --font-en:    'Cormorant Garamond', Georgia, serif;
  --font-hand:  'Caveat', cursive;
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ===== Spacing rhythm ===== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
}

/* ============================================================
   Base body — iOS 17 vibrant mesh gradient
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  min-height: 100vh;
  /* 淡蓝 mesh — 大部分接近白，角落点蓝（玻璃才能看到色差） */
  background: #F4F7FB;
  background-image:
    radial-gradient(ellipse 70% 55% at 8% 12%,   rgba(143,168,195,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 92% 88%,  rgba(109,138,169,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 5%,   rgba(220,229,238,0.85) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 10% 95%,  rgba(238,243,248,0.95) 0%, transparent 60%),
    linear-gradient(135deg, #ECEFF4 0%, #F4F7FB 50%, #E5ECF3 100%);
  background-attachment: fixed;
}

/* Subtle grain (sub-pixel texture for "premium" feel) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.55 0 0 0 0 0.6 0 0 0 0.35 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
body > * { position: relative; z-index: 1; }

/* ============================================================
   Font helper classes
   ============================================================ */

.xingkai  { font-family: var(--font-serif); letter-spacing: 0; }
.serif-en { font-family: var(--font-en); }
.hand     { font-family: var(--font-hand); }
.mono     { font-family: var(--font-mono); }

/* ============================================================
   Card (squircle, no border, layered shadow)
   ============================================================ */

/* iOS 17 Liquid Glass — 真透明（不是白色），靠 blur + rim light 定义形状 */
.card {
  /* 单层实色：去掉 backdrop-filter 毛玻璃，根治区块间重绘抖动 */
  background: #F4F7EE;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: var(--r-xl);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),       /* top rim light */
    inset 0 -1px 0 rgba(31,45,62,0.06),
    inset 1px 0 0 rgba(255,255,255,0.25),       /* left rim */
    0 1px 2px rgba(26,31,43,0.04),
    0 12px 36px -8px rgba(26,31,43,0.14);
  /* 只过渡阴影/边框；背景 alpha 瞬切，避免毛玻璃逐帧重算导致区块间抖动 */
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.card:hover {
  background: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(31,45,62,0.06),
    0 8px 24px rgba(26,31,43,0.10),
    0 24px 60px -12px rgba(26,31,43,0.22);
}
.card-solid {
  background: var(--bg-elevated);
  border: none;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}
.card-flat {
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,0.40);
}

/* ============================================================
   Label (uppercase mono, secondary text)
   ============================================================ */

.label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* ============================================================
   Pill / tag (squircle)
   ============================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--blue-50);
  color: var(--blue-700);
  font-weight: 500;
}

/* ============================================================
   Nav item
   ============================================================ */

.nav-item {
  padding: 8px 16px;
  border-radius: var(--r-full);
  font-size: 13px;
  color: var(--ink-2);
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
  font-weight: 500;
}
.nav-item:hover:not(.active) {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink-1);
}
.nav-item.active {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-800));
  color: white;
  box-shadow: 0 4px 12px rgba(91,122,149,0.32);
}

/* ============================================================
   Stat number (large display, tight tracking)
   ============================================================ */

.stat-num {
  font-family: var(--font-en);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink-1);
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.btn-primary {
  background: var(--ink-1);
  color: white;
}
.btn-primary:hover { background: var(--blue-700); transform: translateY(-1px); }

.btn-secondary {
  background: var(--bg-tinted);
  color: var(--ink-1);
}
.btn-secondary:hover { background: var(--bg-sunk); }

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover { background: var(--bg-tinted); color: var(--ink-1); }

/* ============================================================
   Hairline divider
   ============================================================ */

.divider-dotted {
  border-top: 1px dashed var(--hairline);
}
.divider {
  border-top: 1px solid var(--separator);
}

/* ============================================================
   Input
   ============================================================ */

input.tk-input,
textarea.tk-input,
select.tk-input {
  width: 100%;
  background: var(--bg-sunk);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 15px;
  color: var(--ink-1);
  outline: none;
  transition: all var(--t-fast) var(--ease);
}
input.tk-input:focus,
textarea.tk-input:focus,
select.tk-input:focus {
  background: white;
  border-color: var(--blue-300);
  box-shadow: 0 0 0 3px rgba(91,122,149,0.12);
}

/* ============================================================
   Backwards-compat aliases (旧变量名 → 新 token)
   so existing class names that reference var(--cream) 等 keep working
   while we migrate page by page.
   ============================================================ */

:root {
  --cream:        var(--bg-base);
  --oat:          var(--bg-tinted);
  --paper:        var(--bg-elevated);
  --paper-warm:   var(--bg-sunk);
  --ink:          var(--ink-1);
  --ink-soft:     var(--ink-2);
  --muted:        var(--ink-3);
  --hairline-soft: var(--hairline);
  --caramel:      var(--blue-500);     /* 暖→冷蓝重映射 */
  --caramel-soft: var(--blue-200);
  --terracotta:   var(--rose);
  --sage:         var(--blue-300);
}

/* ============================================================
   单层模式 · 全站禁用 backdrop-filter 毛玻璃
   实时毛玻璃在区块间移动/hover 时逐帧重算，是「疯狂抖动」根因。
   全部改成单层实色/普通半透明（仅 toast 保留，瞬态不抖）。
   ============================================================ */
*:not(.dc-toast) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}