/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4
 * macrostructure: Workbench · theme: studied-DNA (source: https://vibe-hub.org/vibehub-skill)
 * audience: non-designers · purpose: look up and describe design · tone: utilitarian
 * paper: #ffffff / #1b1d21 · accent: #3559d8 / #7b93ea · type: system sans
 */
:root {
  --layout-max:1540px;
  --layout-gutter:32px;
  --layout-rail:156px;
  --layout-gap:28px;
  --layout-content-inset:calc(var(--layout-rail) + var(--layout-gap));
  --layout-control-inset:10px;
  --layout-reading:916px;
  color-scheme: light;
  --color-bg:#fff; --color-surface:#fafafa; --color-hover:#f4f4f5;
  --color-text:#18181b; --color-secondary:#52525b; --color-muted:#686e79;
  --color-border:#e4e4e7; --color-border-hover:#d9dbe0; --color-line:#f0f0f2; --color-accent:#3559d8;
  --color-on-accent:#fff; --color-accent-soft:color-mix(in srgb,var(--color-accent) 9%,var(--color-bg));
  --color-success:#16734b; --color-error:#b42332; --color-demo-muted:#a1a6b0;
  --shadow-card:0 1px 2px rgb(0 0 0 / 4%),0 4px 14px rgb(0 0 0 / 5%);
  --color-shadow:color-mix(in srgb,var(--color-text) 8%,transparent);
  --color-grid:color-mix(in srgb,var(--color-border) 60%,transparent);
  --color-pink:#d4a9bc; --color-sand:#ddc9a8; --color-sage:#a7b9a9; --color-slate:#6e7d94;
  --swatch-blue:#3559d8;--swatch-violet:#7038c9;--swatch-green:#16734b;--swatch-orange:#a85400;
  --font-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  --font-display:var(--font-body); --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;
  --radius:8px;--radius-lg:12px;--radius-pill:100px;
  --text-sm:14px;--text-base:16px;--text-md:20px;--text-lg:26px;--text-title:clamp(28px,3.1vw,40px);
  --ease:cubic-bezier(.2,.8,.2,1);--dur:150ms;--header-height:60px;
}
:root[data-theme=dark] {
  --shadow-card:0 1px 2px rgb(0 0 0 / 18%),0 4px 14px rgb(0 0 0 / 12%);
  color-scheme:dark;--color-bg:#1b1d21;--color-surface:#22252a;--color-hover:#2c3036;
  --color-text:#d9dce2;--color-secondary:#b3b9c4;--color-muted:#949da9;
  --color-border:#3e444e;--color-border-hover:#525a66;--color-line:#30353d;--color-accent:#7b93ea;--color-on-accent:#1b1d21;
  --color-success:#6ec6a0;--color-error:#ff929c;--color-demo-muted:#666f7c;
}
:root[data-accent=violet]{--color-accent:#7038c9}
:root[data-theme=dark][data-accent=violet]{--color-accent:#b5a0ee}
:root[data-accent=green]{--color-accent:#16734b}
:root[data-theme=dark][data-accent=green]{--color-accent:#6ec6a0}
:root[data-accent=orange]{--color-accent:#a85400}
:root[data-theme=dark][data-accent=orange]{--color-accent:#f0b06b}
@media(max-width:1023px){:root{--header-height:108px}}
:root{
  /* Reference-style example canvas: quiet grey, white panels, restrained accent. */
  --preview-bg:#f8f8f8;
  --preview-panel:#fff;
  --preview-border:#e5e5e8;
  --preview-line:#f0f0f2;
  --preview-text:#4c4f57;
  --preview-muted:#6b727e;
  --preview-shape:#cdd1d9;
  --preview-soft:color-mix(in srgb,var(--color-accent) 7%,var(--preview-panel));
  --preview-shadow:0 2px 6px rgb(24 24 27 / 4%);
  --preview-radius:8px;
  --preview-stage-radius:8px;
}
:root[data-theme=dark]{
  --preview-bg:#24272c;
  --preview-panel:#2d3137;
  --preview-border:#41464f;
  --preview-line:#343941;
  --preview-text:#d3d8e1;
  --preview-muted:#a1a9b5;
  --preview-shape:#69717f;
  --preview-shadow:0 2px 6px rgb(0 0 0 / 10%);
}

/* Softer examples share a neutral palette; page controls retain their theme. */
:root{
  --preview-strong:#69727e;
  --preview-reverse:#fff;
  --preview-highlight:var(--color-accent);
  --preview-soft:#eef0f3;
  --preview-radius:10px;
  --preview-stage-radius:12px;
}
:root[data-theme=dark]{
  --preview-strong:#aeb8c7;
  --preview-reverse:#24272c;
  --preview-soft:#343941;
}