/* Independent font exports may be added here after licensing is confirmed. */
@font-face {
  font-family: "Guanzhao Rounded";
  src: local("江城圆体 400W"), local("JiangChengYuanTi 400W");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Guanzhao Rounded";
  src: local("江城圆体 500W"), local("JiangChengYuanTi 500W");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Guanzhao Rounded";
  src: local("江城圆体 600W"), local("JiangChengYuanTi 600W");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Guanzhao Rounded";
  src: local("江城圆体 700W"), local("JiangChengYuanTi 700W");
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  /* 1. Foundations: UI colors only. Illustration/field palettes stay local. */
  --paper: #fdfbf7;
  --surface: #fffefd;
  --ink: #4e2d1f;
  --muted: #856358;
  --accent: #e76033;
  --accent-strong: #b54524;
  --accent-light: #fff0e6;
  --accent-hover: #da532b;
  --cream: #f3e8d8;
  --line: #e8e1d8;
  --line-subtle: #eee9e3;
  --selected-surface: #fce9dd;
  --hover-surface: #fff7ee;
  --workspace: #efede7;
  --font-rounded: "Guanzhao Rounded", "江城圆体", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* app.js selects the existing platform font stack; naming keeps its exception. */
  --text-caption: 11px;
  --text-xs: 12px;
  --text-helper: 13px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --text-3xl: 24px;
  --text-page: 26px;
  --text-display: 28px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-xs: 20px;
  --leading-meta: 18px;
  --leading-sm: 22px;
  --leading-md: 24px;
  --leading-lg: 26px;
  --leading-xl: 28px;
  --leading-2xl: 30px;
  --leading-3xl: 32px;
  --leading-page: 34px;
  --leading-display: 38px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --radius-control: 10px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-button: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 24px rgba(78,45,31,.03);
  --shadow-composite: 0 8px 24px rgba(78,45,31,.035);
  /* Compatibility for unretired stage-one containers; keep the lighter depth. */
  --soft-shadow: 0 8px 26px #512f2205;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --footer-min-height: 0px;

  /* 2. Component defaults. Override these names on a component/page for variants. */
  --page-gutter: var(--space-6);
  --preview-width: 402px;
  --preview-height: 874px;
  --card-bg: var(--surface);
  --card-radius: var(--radius-card);
  --method-card-bg: var(--card-bg);
  --method-card-radius: var(--card-radius);
  --method-card-shadow: var(--shadow-card);
  --method-row-shadow: 0 5px 18px rgba(78,45,31,.025);
  --article-card-bg: var(--card-bg);
  --stats-card-bg: var(--card-bg);
  --space-card-bg: #f8eddf;
  --composite-card-bg: var(--card-bg);
  --composite-card-shadow: var(--shadow-composite);
  --button-height: 48px;
  --button-radius: var(--radius-button);
  --button-font-size: var(--text-md);
  --button-font-weight: var(--weight-semibold);
  /* Compatibility aliases: ordinary actions no longer grow with page headings. */
  --button-prominent-size: var(--button-font-size);
  --button-prominent-leading: var(--leading-md);
  --button-primary-bg: var(--accent);
  --button-primary-hover-bg: var(--accent-hover);
  --button-primary-color: #fff;
  /* v1.0.1 / Batch 2A: shared action semantics. Selection remains independent. */
  --button-secondary-bg: var(--accent-light);
  --button-secondary-color: var(--accent-strong);
  --button-secondary-hover-bg: var(--hover-surface);
  --button-secondary-pressed-bg: var(--selected-surface);
  --button-text-color: var(--accent-strong);
  --button-quiet-color: var(--muted);
  --control-height: 44px;
  --header-height: 56px;
  --header-mobile-height: 56px;
  --header-title-size: var(--text-lg);
  --header-title-leading: var(--leading-lg);
  --nav-surface: var(--surface);
  --nav-selected: var(--selected-surface);
  --nav-border: var(--line-subtle);
  --nav-height: 81px;
  --nav-item-width: 70px;
  --nav-item-height: 56px;
  --nav-item-radius: var(--radius-panel);
  --nav-label-size: var(--text-xs);
  --input-bg: #f3eee7;
  --input-radius: 14px;
  --option-selected-bg: var(--accent-light);
  --option-selected-border: var(--accent);
  --switch-width: 44px;
  --switch-height: 26px;
  --switch-thumb: 20px;
  --switch-inset: 3px;
  --switch-off: #d9cdc2;
  --switch-on: var(--accent);
  --switch-thumb-bg: var(--surface);
  --method-title-size: var(--text-3xl);
  --method-title-leading: var(--leading-3xl);
  --method-action-inset: 35px;
}
@media (max-width: 360px) {
  :root { --page-gutter: var(--space-5); --method-action-inset: var(--space-3); }
}