:root {
  --ui-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --card-font-family: "Noto Serif KR", "Batang", serif;
  --bg: #fcfbfa;
  --surface: #ffffff;
  --surface-soft: #f7f4f1;
  --primary: #c7b8aa;
  --primary-soft: #f7f4f1;
  --text: #302d2b;
  --text-muted: #716b66;
  --border: #ddd6d0;
  --border-strong: #c7b8aa;
  --selected: #e9e3de;
  --success: #9a8878;
  --danger-text: #b33a3a;
  --danger-border: #b33a3a;
  --danger-bg: #f9e8e8;
  --danger-hover: #f4d8d8;

  --tone-border: #e9e3de;
  --tone-surface-soft: var(--surface-soft);
  --tone-border-strong: var(--border-strong);

  --ui-paper-bg: color-mix(in srgb, var(--surface) 94%, var(--primary-soft));
  --ui-section-bg: color-mix(in srgb, var(--surface-soft) 52%, transparent);
  --ui-control-bg: color-mix(in srgb, var(--surface) 88%, var(--primary-soft));
  --ui-title-text: var(--text);
  --ui-body-text: var(--text);
  --ui-label-text: color-mix(in srgb, var(--text) 82%, var(--text-muted));
  --ui-select-text: var(--ui-label-text);
  --ui-muted-text: var(--text-muted);
  --ui-page-title-size: 1.25rem;
  --ui-page-title-weight: 500;
  --ui-section-title-size: 1rem;
  --ui-section-title-weight: 500;
  --ui-label-size: 0.85rem;
  --ui-label-weight: 400;
  --ui-help-size: 0.78rem;
  --ui-help-line-height: 1.4;
  --ui-prompt-size: 0.9rem;
  --ui-prompt-weight: 400;
  --ui-status-size: 0.8rem;
  --ui-status-line-height: 1.4;
  --ui-control-font-size: 1rem;
  --ui-control-font-weight: 400;
  --ui-selected-weight: 500;
  --ui-border-paper: color-mix(in srgb, var(--border) 58%, transparent);
  --ui-border-control: color-mix(in srgb, var(--border) 62%, transparent);
  --ui-border-section: color-mix(in srgb, var(--border) 46%, transparent);
  --ui-radius-paper: 8px;
  --ui-radius-control: 10px;
  --ui-select-height: 38px;
  --ui-select-padding: 6px 10px;
  --ui-shadow-paper: 0 12px 32px rgb(75 65 52 / 4%);
  --ui-action-primary-bg: var(--ui-control-bg);
  --ui-action-primary-text: var(--text);
  --ui-action-primary-border: var(--ui-border-control);
  --ui-action-secondary-bg: var(--ui-control-bg);
  --ui-action-secondary-text: var(--text);
  --ui-action-secondary-border: var(--ui-border-control);
  --ui-action-quiet-bg: transparent;
  --ui-action-quiet-text: var(--text-muted);
  --ui-action-quiet-border: var(--ui-border-section);
  --ui-action-text: var(--text-muted);
  --ui-action-font-size: 0.9rem;
  --ui-action-text-font-size: 0.8rem;
  --ui-action-primary-weight: 400;
  --ui-action-secondary-weight: 400;
  --ui-selected-bg: color-mix(in srgb, var(--selected) 72%, var(--surface));
  --ui-selected-border: var(--border-strong);

  --ds-surface-soft: var(--ui-section-bg);
  --ds-border: var(--ui-border-section);
  --ds-border-strong: var(--ui-border-control);
}

:root[data-card-font="gowun-batang"] {
  --card-font-family: "Gowun Batang", "Batang", serif;
}

:root[data-theme="lavender"] {
  --bg: #f2edf9;
  --surface: #fdfbff;
  --surface-soft: #eee7f7;
  --primary: #6f55a1;
  --primary-soft: #e4d8f2;
  --text: #292431;
  --text-muted: #6d6479;
  --border: #d7cae5;
  --border-strong: #beaacf;
  --selected: #d9c8ec;
  --success: #8a75a8;
  --danger-text: #a55e6a;
  --danger-border: #d8aeb5;
  --danger-bg: #fff7f8;
  --danger-hover: #fbeaec;
  --tone-border: var(--border);
  --ui-paper-bg: color-mix(in srgb, var(--surface) 86%, var(--primary-soft));
  --ui-section-bg: color-mix(in srgb, var(--surface-soft) 78%, transparent);
  --ui-control-bg: color-mix(in srgb, var(--surface) 76%, var(--primary-soft));
  --ui-border-paper: color-mix(in srgb, var(--border) 72%, transparent);
  --ui-border-control: color-mix(in srgb, var(--border) 78%, transparent);
  --ui-border-section: color-mix(in srgb, var(--border) 62%, transparent);
}