/* AI Artifact design tokens — B · Capsule.
   Light is the palette the design board draws; dark is the token table's dark column.
   app.css never carries a raw colour, size, spacing, radius or control height: it reads these. */

:root {
  color-scheme: light dark;

  /* colour */
  --field: #eff1f1;
  --surface: #ffffff;
  --raise: #fbfcfc;
  --hover: #f4f6f6;
  --ink: #14181a;
  --muted: #596166;
  --faint: #6e767c;
  --line: #e2e6e7;
  --line-soft: #edefef;
  --line-strong: #d3d8d9;
  --shell: #16191b;
  --shell-ink: #f4f6f6;
  --shell-dim: #cdd4d6;
  --shell-line: rgba(255, 255, 255, 0.14);
  --shell-hover: rgba(255, 255, 255, 0.18);
  --accent: #186246;
  --accent-soft: #e2efe9;
  --accent-ink: #0f4a34;
  --on-accent: #ffffff;
  --agent-bg: #f3f7f5;
  --agent-line: #dde9e3;
  --amber: #c8862a;
  --amber-soft: #f8ecd4;
  --amber-ink: #7a5a15;
  --on-amber: #171008;
  --danger: #a03327;
  --danger-soft: #f7e6e3;
  --danger-ink: #8c2d21;
  --danger-line: #e6d2ce;
  --danger-line-hover: #dcc0bb;
  --chip-neutral: #eceeee;
  --chip-neutral-ink: #4b5155;
  --switch-off: #cfd5d6;
  --avatar-bg: #3b4a44;
  --avatar-ink: #dbe6e0;
  --oauth-hover: #edf0f0;
  --code-dim: #6f7d79;
  --code-green: #7fcbaa;
  --scrim: rgba(16, 22, 25, 0.3);

  /* type */
  --font-ui: "Archivo", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, monospace;
  --fs-105: 10.5px;
  --fs-11: 11px;
  --fs-115: 11.5px;
  --fs-12: 12px;
  --fs-125: 12.5px;
  --fs-13: 13px;
  --fs-135: 13.5px;
  --fs-14: 14px;
  --fs-145: 14.5px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-19: 19px;
  --fs-22: 22px;
  --fs-26: 26px;
  --lh-tight: 1.5;
  --lh-body: 1.58;
  --lh-open: 1.65;
  --lh-code: 1.75;
  --track-caps: 0.05em;
  --track-wide: 0.12em;

  /* spacing */
  --sp-2: 2px;
  --sp-3: 3px;
  --sp-4: 4px;
  --sp-5: 5px;
  --sp-6: 6px;
  --sp-7: 7px;
  --sp-8: 8px;
  --sp-9: 9px;
  --sp-10: 10px;
  --sp-11: 11px;
  --sp-12: 12px;
  --sp-13: 13px;
  --sp-14: 14px;
  --sp-15: 15px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-26: 26px;
  --sp-28: 28px;
  --sp-30: 30px;
  --sp-38: 38px;
  --sp-40: 40px;
  --sp-58: 58px;
  --sp-76: 76px;
  --sp-110: 110px;

  /* shape */
  --r-sm: 4px;
  --r-md: 7px;
  --r-quote: 8px;
  --r: 10px;
  --r-lg: 14px;
  --r-sheet: 16px;
  --r-signin: 26px;
  --r-mark: 9px;
  --pill: 999px;

  /* control heights and sizes */
  --h: 34px;
  --h-lg: 42px;
  --h-touch: 44px;
  --h-capsule: 44px;
  --h-capsule-m: 52px;
  --h-item-m: 40px;
  --h-oauth: 48px;
  --h-summary: 40px;
  --h-seg: 30px;
  --h-copy: 30px;
  --h-x: 32px;
  --h-chip: 22px;
  --h-switch: 26px;
  --w-switch: 44px;
  --knob: 20px;
  --knob-travel: 18px;
  --ico: 16px;
  --ico-sm: 14px;
  --ico-lg: 20px;
  --ico-oauth: 17px;
  --avatar: 26px;
  --avatar-cap: 34px;
  --avatar-cap-m: 40px;
  --mark: 30px;
  --grab-w: 38px;
  --grab-h: 4px;
  --fav: 19px;
  --fav-w: 26px;
  --fav-cap: 15px;
  --meter-h: 6px;
  --border: 1px;
  --stroke: 1.5;
  --focus-w: 2px;
  --quote-mark-shift: -3px;
  --blur: 12px;
  --h-m: 36px;

  /* layout */
  --page-top: 76px;
  --capsule-top: 18px;
  --capsule-bottom-m: 38px;
  --capsule-gutter: 32px;
  --col-w: 920px;
  --doc-w: 860px;
  --panel-w: 386px;
  --panel-right: 22px;
  --panel-shift: 430px;
  --capsule-shift: 215px;
  --dd-w: 236px;
  --dd-w-m: 250px;
  --dd-top: 44px;
  --dd-bottom-m: 48px;
  --signin-w: 376px;
  --key-col: 128px;
  --area-min: 58px;
  --m-top-h: 46px;
  --sheet-h: 62%;
  --sheet-share-h: 72%;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* motion */
  --t-state: 150ms ease-out;
  --t-enter: 240ms ease-out;
  --t-exit: 160ms ease-in;

  /* shadows */
  --shadow-capsule: 0 10px 30px -10px rgba(10, 16, 18, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-panel: 0 28px 70px -24px rgba(16, 24, 28, 0.4);
  --shadow-doc: 0 1px 2px rgba(18, 26, 30, 0.06), 0 24px 60px -28px rgba(18, 26, 30, 0.35);
  --shadow-dd: 0 20px 44px -18px rgba(14, 22, 26, 0.4);
  --shadow-signin: 0 24px 60px -24px rgba(10, 16, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-sheet: 0 -16px 40px -16px rgba(14, 22, 26, 0.42);
  --shadow-knob: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-seg: 0 1px 2px rgba(16, 24, 28, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --field: #0f1113;
    --surface: #191d1f;
    --raise: #1e2325;
    --hover: #23292b;
    --ink: #eaeded;
    --muted: #98a1a6;
    --faint: #7e878c;
    --line: #272c2e;
    --line-soft: #212628;
    --line-strong: #343a3d;
    --shell: #f2f4f4;
    --shell-ink: #16191b;
    --shell-dim: #5b6468;
    --shell-line: rgba(0, 0, 0, 0.14);
    --shell-hover: rgba(0, 0, 0, 0.1);
    --accent: #6dbb9a;
    --accent-soft: #123125;
    --accent-ink: #a9dcc6;
    --on-accent: #0f1113;
    --agent-bg: #142a22;
    --agent-line: #1f3d31;
    --amber: #e0a64a;
    --amber-soft: #34260f;
    --amber-ink: #f0c98a;
    --on-amber: #171008;
    --danger: #d9776a;
    --danger-soft: #351a16;
    --danger-ink: #efa79b;
    --danger-line: #4a2a25;
    --danger-line-hover: #5c3630;
    --chip-neutral: #262c2e;
    --chip-neutral-ink: #b6bec2;
    --switch-off: #3a4245;
    --avatar-bg: #c9d6d0;
    --avatar-ink: #1f2a25;
    --oauth-hover: #24292c;
    --code-dim: #6b7674;
    --code-green: #186246;
    --scrim: rgba(0, 0, 0, 0.5);
  }
}

/* ---- board chapters 06–11 (2026-09-17) ---- */
:root {
  --dd-w-wide: 300px;
  --h-warnbar: 38px;
  --capsule-top-banner: 56px;
  --page-top-banner: 112px;
  --err-w: 520px;
  --err-copy-w: 44ch;
  --fs-23: 23px;
  --track-code: 0.2em;
  --auth-w: 424px;
  --auth-k-w: 94px;
  --h-seal: 44px;
  --gal-pick-w: 150px;
}

:root { --r-signin-m: 24px; --h-oauth-m: 52px; }
:root { --dd-w-context: 286px; --dd-w-versions: 290px; --cap-title-w: 320px; }

/* ---- landing page (2026-09-17) ---- */
:root {
  --fs-38: 38px;
  --lh-hero: 1.16;
  --hero-w: 20ch;
  --lede-w: 60ch;
  --h-lang: 32px;
  --l-panel-w: 316px;
  --l-screen-h: 560px;
  --l-screen-h-m: 470px;
  --l-sheet-w: 700px;
  --l-agents-w: 660px;
}
:root { --ico-xs: 12px; }