{
  "contractVersion": 1,
  "format": "project-css-tokens",
  "description": "Project-owned typed CSS-value contract. Semantic CSS variables remain the public consumer interface; this is not a full DTCG interchange implementation.",
  "defaultStyle": "precision",
  "roles": {
    "--space-3xs": {
      "type": "length",
      "description": "Shared spacing scale; use semantic spacing roles in compositions.",
      "layer": "primitive"
    },
    "--space-2xs": {
      "type": "length",
      "description": "Shared spacing scale; use semantic spacing roles in compositions.",
      "layer": "primitive"
    },
    "--space-xs": {
      "type": "length",
      "description": "Shared spacing scale; use semantic spacing roles in compositions.",
      "layer": "primitive"
    },
    "--space-sm": {
      "type": "length",
      "description": "Shared spacing scale; use semantic spacing roles in compositions.",
      "layer": "primitive"
    },
    "--space-md": {
      "type": "length",
      "description": "Shared spacing scale; use semantic spacing roles in compositions.",
      "layer": "primitive"
    },
    "--space-lg": {
      "type": "length",
      "description": "Shared spacing scale; use semantic spacing roles in compositions.",
      "layer": "primitive"
    },
    "--space-xl": {
      "type": "length",
      "description": "Shared spacing scale; use semantic spacing roles in compositions.",
      "layer": "primitive"
    },
    "--space-2xl": {
      "type": "length",
      "description": "Shared spacing scale; use semantic spacing roles in compositions.",
      "layer": "primitive"
    },
    "--space-3xl": {
      "type": "length",
      "description": "Shared spacing scale; use semantic spacing roles in compositions.",
      "layer": "primitive"
    },
    "--space-4xl": {
      "type": "length",
      "description": "Shared spacing scale; use semantic spacing roles in compositions.",
      "layer": "primitive"
    },
    "--text-xs": {
      "type": "length",
      "description": "Shared legible type scale; role-specific styles select a step.",
      "layer": "primitive"
    },
    "--text-sm": {
      "type": "length",
      "description": "Shared legible type scale; role-specific styles select a step.",
      "layer": "primitive"
    },
    "--text-md": {
      "type": "length",
      "description": "Shared legible type scale; role-specific styles select a step.",
      "layer": "primitive"
    },
    "--text-lg": {
      "type": "length",
      "description": "Shared legible type scale; role-specific styles select a step.",
      "layer": "primitive"
    },
    "--text-xl": {
      "type": "length",
      "description": "Shared legible type scale; role-specific styles select a step.",
      "layer": "primitive"
    },
    "--text-2xl": {
      "type": "length",
      "description": "Shared legible type scale; role-specific styles select a step.",
      "layer": "primitive"
    },
    "--text-3xl": {
      "type": "length",
      "description": "Shared legible type scale; role-specific styles select a step.",
      "layer": "primitive"
    },
    "--text-display-s": {
      "type": "length",
      "description": "Shared legible type scale; role-specific styles select a step.",
      "layer": "primitive"
    },
    "--text-display": {
      "type": "length",
      "description": "Shared legible type scale; role-specific styles select a step.",
      "layer": "primitive"
    },
    "--text-section": {
      "type": "length",
      "description": "Shared legible type scale; role-specific styles select a step.",
      "layer": "primitive"
    },
    "--text-title": {
      "type": "length",
      "description": "Shared legible type scale; role-specific styles select a step.",
      "layer": "primitive"
    },
    "--text-lead": {
      "type": "length",
      "description": "Shared legible type scale; role-specific styles select a step.",
      "layer": "primitive"
    },
    "--tracking-display": {
      "type": "number",
      "description": "Normal Chinese tracking; no compressed character spacing.",
      "layer": "semantic"
    },
    "--line-body": {
      "type": "number",
      "description": "Unitless line-height for this text role.",
      "layer": "semantic"
    },
    "--line-ui": {
      "type": "number",
      "description": "Unitless line-height for this text role.",
      "layer": "semantic"
    },
    "--line-caption": {
      "type": "number",
      "description": "Unitless line-height for this text role.",
      "layer": "semantic"
    },
    "--icon-size": {
      "type": "length",
      "description": "Nominal inline icon size; the control owns the hit target.",
      "layer": "semantic"
    },
    "--radius-pill": {
      "type": "length",
      "description": "Fully rounded shape for compact controls.",
      "layer": "semantic"
    },
    "--color-clear": {
      "type": "color",
      "description": "Transparent surface with no visual state meaning.",
      "layer": "primitive"
    },
    "--font-display": {
      "type": "font",
      "description": "Style-specific display stack; self-hosted or platform-native fonts only.",
      "layer": "semantic"
    },
    "--font-body": {
      "type": "font",
      "description": "Self-hosted or platform-native font stack; no remote font dependency.",
      "layer": "semantic"
    },
    "--font-outlier": {
      "type": "font",
      "description": "Self-hosted or platform-native font stack; no remote font dependency.",
      "layer": "semantic"
    },
    "--container": {
      "type": "length",
      "description": "Maximum site content measure.",
      "layer": "composition"
    },
    "--gutter": {
      "type": "length",
      "description": "Shared outer content inset.",
      "layer": "composition"
    },
    "--z-base": {
      "type": "number",
      "description": "Stable stacking order; component layers retain the same relationship.",
      "layer": "primitive"
    },
    "--z-raised": {
      "type": "number",
      "description": "Stable stacking order; component layers retain the same relationship.",
      "layer": "primitive"
    },
    "--z-dropdown": {
      "type": "number",
      "description": "Stable stacking order; component layers retain the same relationship.",
      "layer": "primitive"
    },
    "--z-sticky": {
      "type": "number",
      "description": "Stable stacking order; component layers retain the same relationship.",
      "layer": "primitive"
    },
    "--z-sticky-nav": {
      "type": "number",
      "description": "Stable stacking order; component layers retain the same relationship.",
      "layer": "primitive"
    },
    "--z-modal": {
      "type": "number",
      "description": "Stable stacking order; component layers retain the same relationship.",
      "layer": "primitive"
    },
    "--z-toast": {
      "type": "number",
      "description": "Stable stacking order; component layers retain the same relationship.",
      "layer": "primitive"
    },
    "--z-tooltip": {
      "type": "number",
      "description": "Stable stacking order; component layers retain the same relationship.",
      "layer": "primitive"
    },
    "--color-paper": {
      "type": "color",
      "description": "Page canvas.",
      "layer": "semantic"
    },
    "--color-paper-2": {
      "type": "color",
      "description": "Secondary region or quiet hover surface.",
      "layer": "semantic"
    },
    "--color-paper-3": {
      "type": "color",
      "description": "Stronger neutral hover surface.",
      "layer": "semantic"
    },
    "--color-surface": {
      "type": "color",
      "description": "Interactive content surface.",
      "layer": "semantic"
    },
    "--color-preview": {
      "type": "color",
      "description": "Specimen stage; distinct from page canvas.",
      "layer": "semantic"
    },
    "--color-field": {
      "type": "color",
      "description": "Editable field fill.",
      "layer": "semantic"
    },
    "--color-ink": {
      "type": "color",
      "description": "Primary readable text.",
      "layer": "semantic"
    },
    "--color-ink-2": {
      "type": "color",
      "description": "Secondary explanations and labels.",
      "layer": "semantic"
    },
    "--color-muted": {
      "type": "color",
      "description": "Metadata and placeholders; retain readable contrast.",
      "layer": "semantic"
    },
    "--color-rule": {
      "type": "color",
      "description": "Decorative divisions; not a required field boundary.",
      "layer": "semantic"
    },
    "--color-rule-strong": {
      "type": "color",
      "description": "Required field boundary, at least 3:1 against field fill.",
      "layer": "semantic"
    },
    "--color-control-border": {
      "type": "color",
      "description": "Boundary for controls whose shape is also conveyed by fill and label.",
      "layer": "semantic"
    },
    "--color-accent": {
      "type": "color",
      "description": "Primary action and selected content.",
      "layer": "semantic"
    },
    "--color-accent-deep": {
      "type": "color",
      "description": "Primary action hover.",
      "layer": "semantic"
    },
    "--color-accent-soft": {
      "type": "color",
      "description": "Selected background.",
      "layer": "semantic"
    },
    "--color-accent-ink": {
      "type": "color",
      "description": "Text on the accent background.",
      "layer": "semantic"
    },
    "--color-focus": {
      "type": "color",
      "description": "Visible keyboard focus.",
      "layer": "semantic"
    },
    "--color-brand": {
      "type": "color",
      "description": "Brand role; follows the primary accent.",
      "layer": "semantic"
    },
    "--color-error": {
      "type": "color",
      "description": "Error text; accompany with an explicit explanation.",
      "layer": "semantic"
    },
    "--color-success": {
      "type": "color",
      "description": "Success text; accompany with explicit state.",
      "layer": "semantic"
    },
    "--color-backdrop": {
      "type": "color",
      "description": "Modal backdrop; never a text color.",
      "layer": "semantic"
    },
    "--shadow-control": {
      "type": "shadow",
      "description": "Raised action depth.",
      "layer": "semantic"
    },
    "--shadow-primary": {
      "type": "shadow",
      "description": "Primary action depth.",
      "layer": "semantic"
    },
    "--shadow-field": {
      "type": "shadow",
      "description": "Inset editable-field depth.",
      "layer": "semantic"
    },
    "--shadow-card": {
      "type": "shadow",
      "description": "Ordinary content depth; none when spacing or a border suffices.",
      "layer": "semantic"
    },
    "--shadow-overlay": {
      "type": "shadow",
      "description": "Detached overlay depth.",
      "layer": "semantic"
    },
    "--radius-card": {
      "type": "length",
      "description": "Package content corner radius.",
      "layer": "semantic"
    },
    "--radius-input": {
      "type": "length",
      "description": "Native and package control corner radius.",
      "layer": "semantic"
    },
    "--control-height": {
      "type": "length",
      "description": "Fine-pointer control minimum; coarse conditions override to 48px.",
      "layer": "semantic"
    },
    "--control-compact": {
      "type": "length",
      "description": "Compact inline-action minimum.",
      "layer": "semantic"
    },
    "--target-size": {
      "type": "length",
      "description": "Icon-action target size; separate from visible icon geometry.",
      "layer": "semantic"
    },
    "--space-card": {
      "type": "length",
      "description": "Related content inset.",
      "layer": "semantic"
    },
    "--space-control": {
      "type": "length",
      "description": "Related control spacing.",
      "layer": "semantic"
    },
    "--space-section": {
      "type": "length",
      "description": "Internal section spacing.",
      "layer": "semantic"
    },
    "--gap-columns": {
      "type": "length",
      "description": "Composition column gap.",
      "layer": "composition"
    },
    "--section-gap-s": {
      "type": "length",
      "description": "Small section separation.",
      "layer": "composition"
    },
    "--section-gap": {
      "type": "length",
      "description": "Default section separation.",
      "layer": "composition"
    },
    "--section-gap-l": {
      "type": "length",
      "description": "Large reading section separation.",
      "layer": "composition"
    },
    "--site-display": {
      "type": "length",
      "description": "Site display role; fluid presets retain a 32px minimum.",
      "layer": "composition"
    },
    "--site-card-title": {
      "type": "length",
      "description": "Component name beneath or beside the specimen.",
      "layer": "composition"
    },
    "--site-section": {
      "type": "length",
      "description": "Site section heading.",
      "layer": "composition"
    },
    "--site-lead": {
      "type": "length",
      "description": "Short purpose text below a site heading.",
      "layer": "composition"
    },
    "--site-heading-gap": {
      "type": "length",
      "description": "Heading-to-content separation.",
      "layer": "composition"
    },
    "--site-rail-width": {
      "type": "length",
      "description": "Site navigation rail width; the selected composition decides its placement.",
      "layer": "composition"
    },
    "--site-content-padding": {
      "type": "length",
      "description": "Site content inset.",
      "layer": "composition"
    },
    "--site-preview-control": {
      "type": "length",
      "description": "Bounded control specimen window; not a package component height.",
      "layer": "composition"
    },
    "--site-preview-content": {
      "type": "length",
      "description": "Bounded content specimen window.",
      "layer": "composition"
    },
    "--site-preview-panel": {
      "type": "length",
      "description": "Structured specimen window; long content scrolls locally.",
      "layer": "composition"
    },
    "--site-frame-radius": {
      "type": "length",
      "description": "Specimen frame radius.",
      "layer": "composition"
    },
    "--site-header-height": {
      "type": "length",
      "description": "Wide-screen global header minimum.",
      "layer": "composition"
    },
    "--site-card-gap": {
      "type": "length",
      "description": "Collection item separation.",
      "layer": "composition"
    },
    "--display-weight": {
      "type": "number",
      "description": "Package display weight.",
      "layer": "semantic"
    },
    "--site-display-weight": {
      "type": "number",
      "description": "Site display weight.",
      "layer": "composition"
    },
    "--site-display-line": {
      "type": "number",
      "description": "Unitless Chinese-first display line height.",
      "layer": "composition"
    },
    "--site-gallery-columns": {
      "type": "number",
      "description": "Wide-screen catalog column count; responsive layout can collapse it.",
      "layer": "composition"
    },
    "--dur-micro": {
      "type": "duration",
      "description": "Immediate press and small state feedback.",
      "layer": "semantic"
    },
    "--dur-short": {
      "type": "duration",
      "description": "Short component-state transition.",
      "layer": "semantic"
    },
    "--dur-long": {
      "type": "duration",
      "description": "Longer owned content transition.",
      "layer": "semantic"
    },
    "--ease-out": {
      "type": "easing",
      "description": "State enters and settles.",
      "layer": "semantic"
    },
    "--ease-in": {
      "type": "easing",
      "description": "State exits.",
      "layer": "semantic"
    },
    "--ease-in-out": {
      "type": "easing",
      "description": "Connected movement between states.",
      "layer": "semantic"
    },
    "--site-stage": {
      "type": "color",
      "description": "Site specimen fill; aliases the shared preview role.",
      "layer": "composition"
    }
  },
  "shared": {
    "--space-3xs": "2px",
    "--space-2xs": "4px",
    "--space-xs": "8px",
    "--space-sm": "12px",
    "--space-md": "16px",
    "--space-lg": "24px",
    "--space-xl": "40px",
    "--space-2xl": "64px",
    "--space-3xl": "96px",
    "--space-4xl": "144px",
    "--text-xs": ".75rem",
    "--text-sm": ".875rem",
    "--text-md": "1rem",
    "--text-lg": "1.125rem",
    "--text-xl": "1.375rem",
    "--text-2xl": "1.75rem",
    "--text-3xl": "2.25rem",
    "--text-display-s": "2rem",
    "--text-display": "2.25rem",
    "--text-section": "1.375rem",
    "--text-title": "1rem",
    "--text-lead": "1.125rem",
    "--tracking-display": "0",
    "--line-body": "1.75",
    "--line-ui": "1.5715",
    "--line-caption": "1.5",
    "--icon-size": "16px",
    "--radius-pill": "999px",
    "--color-clear": "transparent",
    "--font-body": "'Geist',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif",
    "--font-outlier": "'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
    "--container": "1440px",
    "--gutter": "32px",
    "--z-base": "1",
    "--z-raised": "10",
    "--z-dropdown": "100",
    "--z-sticky": "200",
    "--z-sticky-nav": "300",
    "--z-modal": "400",
    "--z-toast": "500",
    "--z-tooltip": "600"
  },
  "presets": [
    {
      "id": "precision",
      "name": "精密",
      "english": "Precision",
      "northStar": "让查找、验证和接入像操作精密仪器一样直接。",
      "description": "紧凑目录、技术元信息与清晰的操作边界。",
      "tokens": {
        "--font-display": "'Geist',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif",
        "--display-weight": "600",
        "--radius-card": "8px",
        "--radius-input": "4px",
        "--control-height": "32px",
        "--control-compact": "28px",
        "--target-size": "32px",
        "--space-card": "20px",
        "--space-control": "10px",
        "--space-section": "24px",
        "--gap-columns": "20px",
        "--section-gap-s": "40px",
        "--section-gap": "48px",
        "--section-gap-l": "64px",
        "--site-display": "2rem",
        "--site-display-line": "1.25",
        "--site-display-weight": "600",
        "--site-card-title": "1.125rem",
        "--site-section": "1.125rem",
        "--site-lead": "1rem",
        "--site-heading-gap": "20px",
        "--site-rail-width": "184px",
        "--site-content-padding": "32px",
        "--site-gallery-columns": "3",
        "--site-preview-control": "168px",
        "--site-preview-content": "216px",
        "--site-preview-panel": "280px",
        "--site-frame-radius": "8px",
        "--site-header-height": "64px",
        "--site-card-gap": "20px",
        "--dur-micro": "80ms",
        "--dur-short": "120ms",
        "--dur-long": "200ms",
        "--ease-out": "cubic-bezier(.2,.8,.2,1)",
        "--ease-in": "cubic-bezier(.7,0,.84,0)",
        "--ease-in-out": "cubic-bezier(.65,0,.35,1)",
        "--site-stage": "var(--color-preview)"
      },
      "modes": {
        "light": {
          "--color-paper": "#ffffff",
          "--color-paper-2": "#f2f6f4",
          "--color-paper-3": "#e5ede8",
          "--color-surface": "#ffffff",
          "--color-preview": "#f0f5f2",
          "--color-field": "#ffffff",
          "--color-ink": "#172526",
          "--color-ink-2": "#394e47",
          "--color-muted": "#586b66",
          "--color-rule": "#dbe5df",
          "--color-rule-strong": "#6d8278",
          "--color-control-border": "#c5d2ca",
          "--color-accent": "#16705b",
          "--color-accent-deep": "#0f5a47",
          "--color-accent-soft": "#e5f3ed",
          "--color-accent-ink": "#ffffff",
          "--color-focus": "#16705b",
          "--color-error": "#b42318",
          "--color-success": "#247245",
          "--color-backdrop": "#06140e88",
          "--color-brand": "var(--color-accent)",
          "--shadow-control": "0 1px 2px #1528230a",
          "--shadow-primary": "0 1px 2px #1528231a",
          "--shadow-field": "inset 0 1px 2px #15282305",
          "--shadow-card": "none",
          "--shadow-overlay": "0 12px 32px #15282324,0 2px 6px #15282312"
        },
        "dark": {
          "--color-paper": "#0f1916",
          "--color-paper-2": "#1b2b24",
          "--color-paper-3": "#263a30",
          "--color-surface": "#15211d",
          "--color-preview": "#1a2923",
          "--color-field": "#192822",
          "--color-ink": "#e9f2eb",
          "--color-ink-2": "#bfd1c3",
          "--color-muted": "#a3b8aa",
          "--color-rule": "#2e4337",
          "--color-rule-strong": "#7d9b88",
          "--color-control-border": "#3f5b49",
          "--color-accent": "#9ad8b2",
          "--color-accent-deep": "#b2e5c4",
          "--color-accent-soft": "#1d3b2a",
          "--color-accent-ink": "#10281b",
          "--color-focus": "#9ad8b2",
          "--color-error": "#ffb4ab",
          "--color-success": "#99d3a8",
          "--color-backdrop": "#020804bb",
          "--color-brand": "var(--color-accent)",
          "--shadow-control": "0 1px 2px #00000033",
          "--shadow-primary": "0 1px 3px #00000033",
          "--shadow-field": "inset 0 1px 2px #00000033",
          "--shadow-card": "none",
          "--shadow-overlay": "0 12px 36px #00000066,0 2px 6px #00000033"
        }
      }
    },
    {
      "id": "folio",
      "name": "编辑",
      "english": "Folio",
      "northStar": "像阅读一册细致编排的组件样张，理解内容与表现。",
      "description": "宋体标题、纸色表面与连续的宽幅组件篇章。",
      "tokens": {
        "--font-display": "'Songti SC','STSong','Noto Serif CJK SC',Georgia,serif",
        "--display-weight": "500",
        "--radius-card": "2px",
        "--radius-input": "8px",
        "--control-height": "40px",
        "--control-compact": "36px",
        "--target-size": "40px",
        "--space-card": "28px",
        "--space-control": "12px",
        "--space-section": "40px",
        "--gap-columns": "32px",
        "--section-gap-s": "48px",
        "--section-gap": "64px",
        "--section-gap-l": "96px",
        "--site-display": "clamp(2rem,3.2vw,2.75rem)",
        "--site-display-line": "1.3",
        "--site-display-weight": "500",
        "--site-card-title": "1.375rem",
        "--site-section": "1.375rem",
        "--site-lead": "1rem",
        "--site-heading-gap": "32px",
        "--site-rail-width": "196px",
        "--site-content-padding": "40px",
        "--site-gallery-columns": "1",
        "--site-preview-control": "192px",
        "--site-preview-content": "248px",
        "--site-preview-panel": "320px",
        "--site-frame-radius": "2px",
        "--site-header-height": "64px",
        "--site-card-gap": "40px",
        "--dur-micro": "100ms",
        "--dur-short": "160ms",
        "--dur-long": "240ms",
        "--ease-out": "cubic-bezier(.2,.7,.3,1)",
        "--ease-in": "cubic-bezier(.7,0,.84,0)",
        "--ease-in-out": "cubic-bezier(.65,0,.35,1)",
        "--site-stage": "var(--color-preview)"
      },
      "modes": {
        "light": {
          "--color-paper": "#f4efe4",
          "--color-paper-2": "#ece4d7",
          "--color-paper-3": "#e3d7c5",
          "--color-surface": "#fbf8f1",
          "--color-preview": "#eee6d8",
          "--color-field": "#fffdf7",
          "--color-ink": "#2c251f",
          "--color-ink-2": "#564b40",
          "--color-muted": "#685d50",
          "--color-rule": "#d6ccbd",
          "--color-rule-strong": "#8d7c68",
          "--color-control-border": "#c6b8a4",
          "--color-accent": "#963d35",
          "--color-accent-deep": "#7c2c26",
          "--color-accent-soft": "#ead6cf",
          "--color-accent-ink": "#fff8f0",
          "--color-focus": "#963d35",
          "--color-error": "#ad2e24",
          "--color-success": "#32663a",
          "--color-backdrop": "#211a1399",
          "--color-brand": "var(--color-accent)",
          "--shadow-control": "none",
          "--shadow-primary": "none",
          "--shadow-field": "none",
          "--shadow-card": "none",
          "--shadow-overlay": "0 12px 32px #2c251f24,0 2px 6px #2c251f12"
        },
        "dark": {
          "--color-paper": "#211d19",
          "--color-paper-2": "#322a22",
          "--color-paper-3": "#41352a",
          "--color-surface": "#29231e",
          "--color-preview": "#302820",
          "--color-field": "#2a241e",
          "--color-ink": "#f4eadb",
          "--color-ink-2": "#d7c8b5",
          "--color-muted": "#c0ad98",
          "--color-rule": "#514437",
          "--color-rule-strong": "#aa9277",
          "--color-control-border": "#685645",
          "--color-accent": "#e8a398",
          "--color-accent-deep": "#f3b8ae",
          "--color-accent-soft": "#4c2b27",
          "--color-accent-ink": "#321915",
          "--color-focus": "#e8a398",
          "--color-error": "#ffb4ab",
          "--color-success": "#a9cc9a",
          "--color-backdrop": "#100c08bb",
          "--color-brand": "var(--color-accent)",
          "--shadow-control": "none",
          "--shadow-primary": "none",
          "--shadow-field": "none",
          "--shadow-card": "none",
          "--shadow-overlay": "0 12px 36px #00000066,0 2px 6px #00000033"
        }
      }
    },
    {
      "id": "studio",
      "name": "工作室",
      "english": "Studio",
      "northStar": "让真实组件像工作台上的对象，拥有合适的分量与空间。",
      "description": "非对称展板、钴蓝动作与更有分量的字体和形状。",
      "tokens": {
        "--font-display": "'Geist',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif",
        "--display-weight": "700",
        "--radius-card": "20px",
        "--radius-input": "10px",
        "--control-height": "38px",
        "--control-compact": "34px",
        "--target-size": "38px",
        "--space-card": "24px",
        "--space-control": "12px",
        "--space-section": "32px",
        "--gap-columns": "20px",
        "--section-gap-s": "48px",
        "--section-gap": "48px",
        "--section-gap-l": "80px",
        "--site-display": "clamp(2rem,3.2vw,2.75rem)",
        "--site-display-line": "1.22",
        "--site-display-weight": "700",
        "--site-card-title": "1.25rem",
        "--site-section": "1.25rem",
        "--site-lead": "1rem",
        "--site-heading-gap": "24px",
        "--site-rail-width": "200px",
        "--site-content-padding": "32px",
        "--site-gallery-columns": "2",
        "--site-preview-control": "216px",
        "--site-preview-content": "256px",
        "--site-preview-panel": "340px",
        "--site-frame-radius": "20px",
        "--site-header-height": "72px",
        "--site-card-gap": "20px",
        "--dur-micro": "100ms",
        "--dur-short": "180ms",
        "--dur-long": "280ms",
        "--ease-out": "cubic-bezier(.16,1,.3,1)",
        "--ease-in": "cubic-bezier(.7,0,.84,0)",
        "--ease-in-out": "cubic-bezier(.65,0,.35,1)",
        "--site-stage": "var(--color-preview)"
      },
      "modes": {
        "light": {
          "--color-paper": "#f1f5ff",
          "--color-paper-2": "#e7edfa",
          "--color-paper-3": "#dbe5fa",
          "--color-surface": "#ffffff",
          "--color-preview": "#e8eefb",
          "--color-field": "#ffffff",
          "--color-ink": "#122540",
          "--color-ink-2": "#3e5270",
          "--color-muted": "#536883",
          "--color-rule": "#d7e0f0",
          "--color-rule-strong": "#6f82a3",
          "--color-control-border": "#bccce5",
          "--color-accent": "#1e57ed",
          "--color-accent-deep": "#1448cc",
          "--color-accent-soft": "#e0e9ff",
          "--color-accent-ink": "#ffffff",
          "--color-focus": "#205cfa",
          "--color-error": "#b42318",
          "--color-success": "#1b7049",
          "--color-backdrop": "#07142e99",
          "--color-brand": "var(--color-accent)",
          "--shadow-control": "0 1px 3px #17357b14",
          "--shadow-primary": "0 2px 5px #205cfa26",
          "--shadow-field": "inset 0 1px 2px #17357b08",
          "--shadow-card": "none",
          "--shadow-overlay": "0 16px 40px #17357b2b,0 2px 6px #17357b14"
        },
        "dark": {
          "--color-paper": "#0d172c",
          "--color-paper-2": "#1b2b47",
          "--color-paper-3": "#293d60",
          "--color-surface": "#15223b",
          "--color-preview": "#1b2d4a",
          "--color-field": "#172740",
          "--color-ink": "#eef4ff",
          "--color-ink-2": "#c0cee6",
          "--color-muted": "#a4b6d4",
          "--color-rule": "#304563",
          "--color-rule-strong": "#8097bd",
          "--color-control-border": "#405b82",
          "--color-accent": "#93b6ff",
          "--color-accent-deep": "#b3cdff",
          "--color-accent-soft": "#233d6b",
          "--color-accent-ink": "#10203f",
          "--color-focus": "#93b6ff",
          "--color-error": "#ffb4ab",
          "--color-success": "#a0dab5",
          "--color-backdrop": "#020818bb",
          "--color-brand": "var(--color-accent)",
          "--shadow-control": "0 1px 2px #00000033",
          "--shadow-primary": "0 1px 3px #00000033",
          "--shadow-field": "inset 0 1px 2px #00000033",
          "--shadow-card": "none",
          "--shadow-overlay": "0 12px 36px #00000066,0 2px 6px #00000033"
        }
      }
    }
  ],
  "responsive": {
    "medium": {
      "media": "(max-width:60rem)",
      "tokens": {
        "--gutter": "24px"
      }
    },
    "compact": {
      "media": "(max-width:40rem)",
      "tokens": {
        "--gutter": "20px",
        "--site-heading-gap": "20px",
        "--site-content-padding": "20px",
        "--site-header-height": "56px",
        "--site-card-gap": "20px"
      }
    },
    "coarse": {
      "media": "(pointer:coarse)",
      "tokens": {
        "--control-height": "48px",
        "--target-size": "48px",
        "--control-compact": "44px"
      }
    }
  }
}