:root {
  --font-ui: "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Avenir Next", sans-serif;
  --font-display: "Avenir Next", "MiSans", "PingFang SC", sans-serif;
  --font-paper: "Songti SC", "STSong", "Noto Serif SC", serif;
  --font-number: "DIN Alternate", "Avenir Next Condensed", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --motion-fast: 140ms;
  --motion-mid: 240ms;

  --button-gap: 10px;
  --button-min: 112px;
}

body[data-theme="paper"] {
  --ink: #10261d;
  --muted: #66776f;
  --paper: #fbfcf7;
  --surface: #fffffb;
  --surface-2: #f6faf4;
  --rail: #edf4ef;
  --line: #d9e4dc;
  --primary: #12754d;
  --primary-2: #0b5d3c;
  --primary-soft: #e2f4eb;
  --primary-text: #123b2a;
  --accent: #c97938;
  --accent-soft: #fff0df;
  --danger: #9d4d45;
  --success: #138256;
  --glow: #9df0c8;
  --disabled-bg: #edf1ec;
  --disabled-text: #96a29c;
  --shadow-soft: 0 18px 46px rgb(18 38 29 / 10%);
  --shadow-paper: 0 26px 80px rgb(18 38 29 / 12%);
  --shadow-hover: 0 14px 34px rgb(18 117 77 / 14%);
}

body[data-theme="mineral"] {
  --ink: #152536;
  --muted: #5f7480;
  --paper: #f8fbfc;
  --surface: #fffffc;
  --surface-2: #f1f7f9;
  --rail: #edf4f7;
  --line: #d6e4e9;
  --primary: #2a6f86;
  --primary-2: #1f5669;
  --primary-soft: #e0f1f4;
  --primary-text: #1d3f4d;
  --accent: #8f6bb7;
  --accent-soft: #f0e8f7;
  --danger: #9f5149;
  --success: #4d7d61;
  --glow: #9ee7ef;
  --disabled-bg: #e9eef0;
  --disabled-text: #87949a;
  --shadow-soft: 0 18px 46px rgb(21 37 54 / 10%);
  --shadow-paper: 0 26px 80px rgb(21 37 54 / 12%);
  --shadow-hover: 0 14px 34px rgb(42 111 134 / 14%);
}

body[data-theme="ink"] {
  --ink: #241d2c;
  --muted: #75687f;
  --paper: #fcf9fd;
  --surface: #fffdfd;
  --surface-2: #f8f2fa;
  --rail: #f4eef7;
  --line: #e3d7e7;
  --primary: #6c5978;
  --primary-2: #4d3d59;
  --primary-soft: #ede5f2;
  --primary-text: #392c43;
  --accent: #2f8d6b;
  --accent-soft: #e3f2eb;
  --danger: #a2514d;
  --success: #5a7e5f;
  --glow: #e6b8ff;
  --disabled-bg: #eee7ef;
  --disabled-text: #9a8da0;
  --shadow-soft: 0 18px 46px rgb(36 29 44 / 10%);
  --shadow-paper: 0 26px 80px rgb(36 29 44 / 12%);
  --shadow-hover: 0 14px 34px rgb(108 89 120 / 16%);
}

body[data-theme="sand"] {
  --ink: #2b281f;
  --muted: #777061;
  --paper: #fbfaf4;
  --surface: #fffef9;
  --surface-2: #f7f4e8;
  --rail: #f0eee5;
  --line: #e4decc;
  --primary: #5f7556;
  --primary-2: #485b41;
  --primary-soft: #e9f0e2;
  --primary-text: #33422e;
  --accent: #a0664a;
  --accent-soft: #f7e8df;
  --danger: #9b5042;
  --success: #637b54;
  --glow: #d8eaa7;
  --disabled-bg: #ece9dc;
  --disabled-text: #99917f;
  --shadow-soft: 0 18px 46px rgb(43 40 31 / 10%);
  --shadow-paper: 0 26px 80px rgb(43 40 31 / 12%);
  --shadow-hover: 0 14px 34px rgb(95 117 86 / 14%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-mid: 1ms;
  }
}