/* CueSpec shared tokens: main site and isolated product viewer. */
:root {
  --text-caption: .875rem;
  --text-ui: 1rem;
  --text-body: 1.0625rem;
  --text-lead: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  --text-card: clamp(1.375rem, 1.125rem + .5vw, 1.625rem);
  --text-section: clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem);
  --text-hero: clamp(3.5rem, 2rem + 5.5vw, 8rem);
  --space-1: .5rem;
  --space-2: 1rem;
  --space-copy: 1.5rem;
  --space-group: 2rem;
  --space-heading: clamp(3rem, 5vw, 4.5rem);
  --space-section: clamp(4rem, 8vw, 8rem);
  --content-max: 90rem;
  --page-margin: clamp(1.25rem, 5vw, 6rem);
  --gutter: max(var(--page-margin), calc((100vw - var(--content-max)) / 2));
  --grid-gap: clamp(1.5rem, 4vw, 4rem);
  --copy-width: 42ch;
  --radius-panel: .75rem;
  --radius-pill: 999px;
  --stroke: 1px;
  --touch-target: 2.75rem;
  --motion-ui: 160ms;
  --surface: color-mix(in srgb, var(--page-fg) 5%, var(--page-bg));

  --font-sans: 'General Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --weight-regular: 400; --weight-medium: 500; --weight-selected: 600;
  --leading-heading: 1.1; --leading-title: 1.25; --leading-body: 1.6; --leading-ui: 1.5;
  --tracking-heading: -.045em; --tracking-title: -.025em;
  --text-dialog: clamp(2rem, 1.4rem + 1.2vw, 2.75rem);
  --text-watermark: 14.5vw;
  --neutral-white: #fff; --neutral-ink: #111; --neutral-dark: #0f0f0f;
  --neutral-panel: #171717; --neutral-input: #222; --neutral-light: #fafafa;
  --muted-modal: #bcbcbc; --muted-dark: #aaa; --muted-light: #666;
  --border-dark: #ffffff30; --border-light: #00000024;
  --page-bg: var(--neutral-dark); --page-fg: var(--neutral-white);
  --muted: var(--muted-dark); --rule: var(--border-dark); --acid: var(--page-fg);
  --task-lime: #dfed93; --task-blue: #b9ddef; --task-purple: #ddc9f0;
  --task-peach: #f1d1b5; --task-mint: #bde3d3; --status-done: #6c9483;
  --space-0: .25rem; --space-half: .75rem; --space-3: 1.25rem;
  --space-6: 3rem; --space-8: 4rem;
  --radius-small: .25rem; --radius-input: .5rem; --radius-round: 50%;
  --control-height: 3.25rem; --input-height: 3.5rem; --form-width: 36rem;
  --icon-ui: 1.25rem; --icon-large: 2rem;
  --focus-width: 2px; --focus-offset: 4px;
  --motion-content: 220ms; --motion-chapter: 500ms; --motion-theme: 150ms;
  --ease-ui: ease; --ease-enter: ease-out;
  --opacity-disabled: .4; --opacity-watermark: .04;
  --shadow-panel: 0 1.5rem 4rem #00000009;
  --z-decoration: -1; --z-content: 1; --z-guide: 10; --z-nav: 20; --z-utility: 30; --z-review: 99;
  --grid-columns: 12;
}
body[data-reading-theme=light] { --page-bg:var(--neutral-white); --page-fg:var(--neutral-ink); --muted:var(--muted-light); --rule:var(--border-light); color-scheme:light; }
@media(max-width:850px) { :root { --text-hero:clamp(3.25rem,2rem + 5.5vw,5.75rem); --text-section:clamp(2.25rem,1.5rem + 3vw,3rem); --grid-columns:4; } }