/* EssayMeow design tokens — "Paper & Pine".
   Single source of colour, type, spacing and motion values. No other file may hard-code a colour. */
:root {
  color-scheme: light;

  /* Surfaces */
  --canvas: #F4EFE4;
  --surface: #FFFCF5;
  --surface-2: #EFE8DA;
  --ink: #14120F;
  --ink-2: #4B443A;
  --muted: #7B7264;
  --line: #DCD2C0;

  /* Brand */
  --pine: #163C33;
  --pine-ink: #F4EFE4;
  --pine-soft: #E2E9E2;
  --terra: #C9502A;
  --terra-ink: #fff6f1;
  --terra-soft: #F7DFD5;
  --ochre: #E0A83C;
  --ochre-soft: #F6ECD3;

  /* Status */
  --ok: #2E6B4E;
  --ok-soft: #E1EDE4;
  --warn: #A9761B;
  --warn-soft: #F7ECCF;
  --danger: #A02B2B;
  --danger-soft: #F5DEDC;
  --focus: #1F5BD8;

  /* Type — 全站单一字族：标题、正文、数字与编号统一使用系统无衬线。
     另两个变量保留为别名，避免各视图里的 var(--font-display/--font-mono) 失效；
     换字体只改 --font-sans 这一行。 */
  --font-sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);
  --font-mono: var(--font-sans);
  --size-xs: 12px;
  --size-sm: 14px;
  --size-base: 16px;
  --size-lg: 20px;
  --size-xl: clamp(22px, 2.4vw, 30px);
  --size-display: clamp(34px, 5vw, 68px);
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.625;
  --tracking-caps: .08em;

  /* Space — 8pt grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Radius — deliberately three sizes only */
  --r-sm: 2px;
  --r-md: 6px;
  --r-pill: 999px;

  /* Motion */
  --t-state: 120ms;
  --t-expand: 200ms;
  --t-route: 320ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Elevation — only overlays may use a shadow */
  --shadow-overlay: 0 24px 60px -28px rgba(20, 18, 15, .38), 0 2px 0 rgba(20, 18, 15, .06);

  /* Layout */
  --shell-max: 1280px;
  --rail: 72px;
  --measure: 68ch;
}

/* Dark theme is intentionally not shipped; the attribute is reserved so a later
   release can add one without touching component CSS. */
[data-theme='dark'] { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-state: 1ms; --t-expand: 1ms; --t-route: 1ms; }
}