/* ─────────────────────────────────────────────────────────
 * 暖记 (Warm Notes) — 手账日记App 视觉系统
 * Theme 1: 暖阳 (Warm Sun) — 温暖治愈 · 手绘插画风 · 默认
 * Theme 2: 松风 (Pine Wind) — 静谧森林 · 自然调性 · 男学生向
 * ───────────────────────────────────────────────────────── */

:root {
  /* Surface */
  --bg: #FFF8F0;
  --surface: #FFFFFF;
  --surface-warm: #FFF3E6;

  /* Foreground ramp (contrast-safe on #FFF8F0) */
  --fg: #2D2420;
  --fg-2: #5C4F47;
  --muted: #7A6D63;
  --meta: #8B7E74;

  /* Border */
  --border: #E8DDD4;
  --border-soft: #F0E8DF;

  /* Accent — soft coral / terracotta */
  --accent: #E07A5F;
  --accent-on: #FFF8F0;
  --accent-hover: #D06A4F;
  --accent-active: #C05A3F;
  --accent-glow: rgba(224, 122, 95, 0.25);

  /* Secondary — sage green */
  --secondary: #81B29A;
  --secondary-soft: #D4E8DC;

  /* Tertiary — warm gold */
  --tertiary: #F2CC8F;
  --tertiary-soft: #FBE8C8;

  /* Rose */
  --rose: #D4A5A5;
  --rose-soft: #F0DADA;

  /* Semantic */
  --success: #5A9E7E;
  --warn: #D4A843;
  --danger: #C93D3D;

  /* Typography */
  --font-display: "Quicksand", "Nunito", "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", monospace;
  --font-handwritten: "Caveat", "Kalam", cursive;

  /* Type scale */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;

  --leading-body: 1.6;
  --leading-tight: 1.25;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Elevation */
  --elev-soft: 0 2px 12px rgba(45, 36, 32, 0.06);
  --elev-medium: 0 4px 20px rgba(45, 36, 32, 0.08);
  --elev-float: 0 8px 32px rgba(45, 36, 32, 0.12);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(224, 122, 95, 0.45);
  --shadow-accent: 0 4px 14px rgba(224, 122, 95, 0.25);
  --shadow-accent-hover: 0 6px 20px rgba(224, 122, 95, 0.35);
  --shadow-input-focus: 0 0 0 3px rgba(224, 122, 95, 0.2);
  --bg-frosted: rgba(255, 248, 240, 0.85);

  /* Touch target minimum (WCAG 2.5.8) */
  --touch-min: 44px;

  /* Motion */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --container-max: 390px;
  --safe-top: 54px;
  --safe-bottom: 34px;
  --tab-height: 56px;

  /* Theme meta */
  --theme-name: "暖阳";
}

/* ─────────────────────────────────────────────────────────
 * Theme: 松风 (Pine Wind) — 森林书房 · 男学生向
 * Steel blue accent + forest green + warm amber
 * ───────────────────────────────────────────────────────── */
[data-theme="pine"] {
  --bg: #F2F3F0;
  --surface: #FFFFFF;
  --surface-warm: #E9EAE6;

  --fg: #23272F;
  --fg-2: #484E58;
  --muted: #6E7380;
  --meta: #8A8F9A;

  --border: #D5D2CD;
  --border-soft: #E3E1DC;

  --accent: #4A7B9D;
  --accent-on: #FFFFFF;
  --accent-hover: #3F6A8A;
  --accent-active: #345A78;
  --accent-glow: rgba(74, 123, 157, 0.25);

  --secondary: #5B9E7A;
  --secondary-soft: #D6E8DE;

  --tertiary: #C49A3C;
  --tertiary-soft: #F0E4C8;

  --rose: #7A8B6A;
  --rose-soft: #E0E8D8;

  --success: #4A9E6E;
  --warn: #B89430;
  --danger: #C93D3D;

  --elev-soft: 0 2px 12px rgba(35, 39, 47, 0.06);
  --elev-medium: 0 4px 20px rgba(35, 39, 47, 0.08);
  --elev-float: 0 8px 32px rgba(35, 39, 47, 0.12);

  --focus-ring: 0 0 0 3px rgba(74, 123, 157, 0.45);
  --shadow-accent: 0 4px 14px rgba(74, 123, 157, 0.25);
  --shadow-accent-hover: 0 6px 20px rgba(74, 123, 157, 0.35);
  --shadow-input-focus: 0 0 0 3px rgba(74, 123, 157, 0.2);
  --bg-frosted: rgba(242, 243, 240, 0.85);

  --theme-name: "松风";
}

/* ─────────────────────────────────────────────────────────
 * Dark Mode — 暖阳 (Warm Sun) dark
 * ───────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :root[data-theme="warm"] {
    --bg: #1A1614;
    --surface: #2A2520;
    --surface-warm: #332D28;
    --fg: #F0E8DF;
    --fg-2: #C4B8AA;
    --muted: #9B8E82;
    --meta: #7A6D63;
    --border: #3A3530;
    --border-soft: #302B26;
    --accent: #E8907A;
    --accent-on: #1A1614;
    --accent-hover: #D07A64;
    --accent-active: #C06A54;
    --accent-glow: rgba(232, 144, 122, 0.25);
    --secondary: #8FBF9E;
    --secondary-soft: #2A3A2E;
    --tertiary: #D4B878;
    --tertiary-soft: #302A1E;
    --rose: #C4A0A0;
    --rose-soft: #3A2A2A;
    --success: #6AAF8E;
    --warn: #C4A843;
    --danger: #D94A4A;
    --elev-soft: 0 2px 12px rgba(0, 0, 0, 0.2);
    --elev-medium: 0 4px 20px rgba(0, 0, 0, 0.25);
    --elev-float: 0 8px 32px rgba(0, 0, 0, 0.3);
    --focus-ring: 0 0 0 3px rgba(232, 144, 122, 0.5);
    --shadow-accent: 0 4px 14px rgba(232, 144, 122, 0.25);
    --shadow-accent-hover: 0 6px 20px rgba(232, 144, 122, 0.35);
    --shadow-input-focus: 0 0 0 3px rgba(232, 144, 122, 0.2);
    --bg-frosted: rgba(26, 22, 20, 0.85);
 * ───────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  [data-theme="pine"] {
    --bg: #14161C;
    --surface: #1C1E26;
    --surface-warm: #22242C;
    --fg: #E4E6EC;
    --fg-2: #B4B8C4;
    --muted: #7E8494;
    --meta: #5E6474;
    --border: #282C38;
    --border-soft: #1E222C;
    --accent: #5A8FAD;
    --accent-on: #14161C;
    --accent-hover: #4A7F9D;
    --accent-active: #3A6F8D;
    --accent-glow: rgba(90, 143, 173, 0.25);
    --secondary: #6AAE85;
    --secondary-soft: #1C2E24;
    --tertiary: #D4AA4C;
    --tertiary-soft: #2A2618;
    --rose: #8A9B7A;
    --rose-soft: #242E20;
    --success: #5AAE7E;
    --warn: #C4A440;
    --danger: #D94A4A;
    --elev-soft: 0 2px 12px rgba(0, 0, 0, 0.2);
    --elev-medium: 0 4px 20px rgba(0, 0, 0, 0.25);
    --elev-float: 0 8px 32px rgba(0, 0, 0, 0.3);
    --focus-ring: 0 0 0 3px rgba(90, 143, 173, 0.5);
    --shadow-accent: 0 4px 14px rgba(90, 143, 173, 0.25);
    --shadow-accent-hover: 0 6px 20px rgba(90, 143, 173, 0.35);
    --shadow-input-focus: 0 0 0 3px rgba(90, 143, 173, 0.2);
    --bg-frosted: rgba(20, 22, 28, 0.85);