/* ============================================================
   DIYICI DESIGN TOKENS — V21 "纸与墨" (Paper & Ink)
   Warm paper, ink-black text, one accent (lake teal). Two voices:
   serif for display (headings, titles — the museum voice), sans for
   body (the reading voice). Radius says what a thing is:
   pill = action, 12 = input, 20 = card/section.
============================================================ */
:root{
  color-scheme:light;
  /* base — warm paper */
  --bg:#F4F1EA;            /* page */
  --surface:#FDFBF6;       /* cards, header, inputs */
  --surface-2:#EEE9DC;     /* secondary buttons, code, quiet fills */
  --surface-3:#E3DCCB;     /* pressed secondary, dividers on surface-2 */
  --line:#E6DFCE;          /* hairlines on paper */
  --line-strong:#D2C7AE;

  /* text — warm ink */
  --ink:#1D1A14;
  --ink-2:#5E594D;         /* secondary text */
  --ink-3:#8C8574;         /* placeholders, timestamps — decorative */

  /* accent — lake teal. deep = text on paper (5.2:1), fill = buttons under white text (4.6:1) */
  --accent:#12A594;
  --accent-fill:#0E8C7E;
  --accent-deep:#0A7267;
  --accent-ink:#075A51;
  --accent-tint:#E3F4F1;
  --accent-tint-2:#C9E9E3;

  --danger:#C7402F; --danger-tint:#FBEAE7;
  --warn:#7A4E00; --warn-tint:#FFF3DB;
  --ok:#075A51; --ok-tint:#E3F4F1;

  /* legacy aliases (older rules / share sheet) */
  --paper:var(--bg); --paper-deep:var(--surface-2); --white:var(--surface);
  --ink-soft:var(--ink-2); --ink-faint:var(--ink-3); --human:var(--accent-ink);
  --line-soft:var(--line); --action:var(--accent); --action-deep:var(--accent-deep);
  --action-deep-hover:var(--accent-ink); --action-soft:var(--accent-tint);
  --warn-bg:var(--warn-tint); --ok-bg:var(--ok-tint);

  /* shape */
  --r-card:20px; --r-input:12px; --r-sm:8px; --r-pill:999px;
  --radius-small:var(--r-sm); --radius-medium:var(--r-input);

  /* space (4-base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --space-1:var(--s1); --space-2:var(--s2); --space-3:var(--s3); --space-4:var(--s4); --space-5:var(--s5);
  --space-6:var(--s6); --space-7:var(--s7); --space-8:var(--s8); --space-9:var(--s9);

  --measure:680px; --gutter:20px;
  --shadow-float:0 8px 24px rgba(21,30,28,.16),0 2px 6px rgba(21,30,28,.08);
  --shadow-sheet:0 -8px 40px rgba(21,30,28,.12);
  --chrome:rgba(255,255,255,.82);

  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:150ms; --t-base:240ms; --t-slow:400ms;
  --motion-fast:var(--t-fast); --motion-normal:var(--t-base); --motion-slow:var(--t-slow);

  /* Two voices. Sans for reading, serif for display (the museum voice). No web fonts. */
  --font-sans:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",
              -apple-system,"Inter","Segoe UI",system-ui,sans-serif;
  --font-serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",
              Georgia,"Times New Roman",serif;   /* V21: the display voice returns */
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --dot-size:8px; --dot-size-small:6px; --dot-size-large:12px;
}

/* Dark: a dim room, not a black screen. Surfaces lift one step, accent brightens. */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#0F1312; --surface:#171C1B; --surface-2:#1F2524; --surface-3:#293130;
    --line:#242B2A; --line-strong:#364040;
    --ink:#ECEFEE; --ink-2:#A3ADAA; --ink-3:#6E7876;
    --accent:#2FCDB9; --accent-fill:#1FB3A2; --accent-deep:#3AD3C0; --accent-ink:#7FE3D6;
    --accent-tint:#123430; --accent-tint-2:#1A4842;
    --danger:#F08A7C; --danger-tint:#3A1F1B; --warn:#F1C56B; --warn-tint:#3A2E12; --ok:#7FE3D6; --ok-tint:#123430;
    --shadow-float:0 8px 24px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);
    --shadow-sheet:0 -8px 40px rgba(0,0,0,.6);
    --chrome:rgba(15,19,18,.82);
  }
  img.card-preview{filter:brightness(.9)}
}