/* Creatio Design System tokens for creatio.design.
   Source of truth: Design System artifact tokens.json (Claude Design project c10462fd, synced 2026-09-26).
   Tiers the JSON does not carry (font weights, motion, sizes behind controls) come from the creatio-ui-build mirror (31/08).
   Generated by scripts/gen_tokens.py. Do not edit by hand: change the DS, then regenerate. */
:root {
  /* ---- ref: literals (mirror, non-colour) ---- */
  --ref-space-4: 4px;
  --ref-space-8: 8px;
  --ref-space-12: 12px;
  --ref-space-16: 16px;
  --ref-space-20: 20px;
  --ref-space-24: 24px;
  --ref-space-28: 28px;
  --ref-space-32: 32px;
  --ref-space-40: 40px;
  --ref-space-48: 48px;
  --ref-space-56: 56px;
  --ref-space-64: 64px;
  --ref-space-72: 72px;
  --ref-space-88: 88px;
  --ref-space-96: 96px;
  --ref-space-120: 120px;
  --ref-radius-0: 0;
  --ref-radius-2: 2px;
  --ref-radius-4: 4px;
  --ref-radius-999: 999px;
  --ref-font-weight-300: 300;
  --ref-font-weight-400: 400;
  --ref-font-weight-500: 500;
  --ref-font-weight-600: 600;
  --ref-font-weight-700: 700;
  --ref-border-1: 1px;
  --ref-border-2: 2px;
  --ref-size-6: 6px;
  --ref-size-8: 8px;
  --ref-size-16: 16px;
  --ref-size-18: 18px;
  --ref-size-20: 20px;
  --ref-size-24: 24px;
  --ref-size-32: 32px;
  --ref-size-36: 36px;
  --ref-size-40: 40px;
  --ref-size-48: 48px;
  --ref-opacity-40: 0.40;
  --ref-opacity-70: 0.70;
  --ref-duration-instant: 40ms;
  --ref-duration-fast: 120ms;
  --ref-duration-slow: 200ms;
  --ref-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ref-z-20: 20;
  --ref-z-40: 40;
  --ref-z-60: 60;
  --ref-z-70: 70;
  --ref-z-90: 90;
  /* ---- ref: colour literals (artifact) ---- */
  --ref-color-ink-900: #151515;
  --ref-color-warm-paper-50: #faf8f5;
  --ref-color-warm-paper-100: #f3f0eb;
  --ref-color-warm-grey-500: #6b6560;
  --ref-color-warm-grey-200: #e3ddd5;
  --ref-color-paper-white: #ffffff;
  --ref-color-ink-900-dark: #f4f0ec;
  --ref-color-warm-grey-500-dark: #c9c0bb;
  --ref-color-warm-paper-50-dark: #242124;
  --ref-color-warm-paper-100-dark: #3f3939;
  --ref-color-warm-grey-200-dark: #5c5248;
  --ref-color-clay-500-dark: #c08081;
  --ref-color-moss-500-dark: #8fbc8f;
  --ref-color-ink-900-a8: rgba(21, 21, 21, 0.08);
  --ref-color-ink-900-a12: rgba(21, 21, 21, 0.12);
  --ref-color-ink-900-a60: rgba(21, 21, 21, 0.6);
  --ref-color-warm-grey-500-a70: rgba(107, 101, 96, 0.7);
  --ref-color-warm-grey-500-dark-a70: rgba(201, 192, 187, 0.7);
  --ref-color-warm-paper-50-a66: rgba(250, 248, 245, 0.66);
  --ref-color-warm-paper-50-dark-a62: rgba(36, 33, 36, 0.62);
  --ref-color-clay-50: #fef4f3;
  --ref-color-clay-100: #fee7e3;
  --ref-color-clay-200: #fecdc6;
  --ref-color-clay-300: #f0a99f;
  --ref-color-clay-400: #c8847b;
  --ref-color-clay-500: #9c5c54;
  --ref-color-clay-600: #81443c;
  --ref-color-clay-700: #6f332d;
  --ref-color-clay-800: #552a25;
  --ref-color-clay-900: #431a16;
  --ref-color-moss-50: #f3f9f0;
  --ref-color-moss-100: #e6f1e1;
  --ref-color-moss-200: #cfe2c6;
  --ref-color-moss-300: #adc7a1;
  --ref-color-moss-400: #88a17c;
  --ref-color-moss-500: #5e7355;
  --ref-color-moss-600: #49603e;
  --ref-color-moss-700: #394f2e;
  --ref-color-moss-800: #2d3d26;
  --ref-color-moss-900: #1f2e17;
  --ref-color-rust-50: #fff4f0;
  --ref-color-rust-100: #fee8de;
  --ref-color-rust-200: #ffcfb9;
  --ref-color-rust-300: #fea47c;
  --ref-color-rust-400: #d57f57;
  --ref-color-rust-500: #aa5830;
  --ref-color-rust-600: #8c3d12;
  --ref-color-rust-700: #772e00;
  --ref-color-rust-800: #5c2507;
  --ref-color-rust-900: #471800;
  --ref-color-slate-50: #f1f8fe;
  --ref-color-slate-100: #e0effe;
  --ref-color-slate-200: #c3defb;
  --ref-color-slate-300: #9cc2ea;
  --ref-color-slate-400: #779cc2;
  --ref-color-slate-500: #527599;
  --ref-color-slate-600: #385b7e;
  --ref-color-slate-700: #284a6c;
  --ref-color-slate-800: #223a52;
  --ref-color-slate-900: #132a42;
  --ref-color-amber-50: #fff6e4;
  --ref-color-amber-100: #ffebc1;
  --ref-color-amber-200: #fbd688;
  --ref-color-amber-300: #eab532;
  --ref-color-amber-400: #bf9007;
  --ref-color-amber-500: #8f6b02;
  --ref-color-amber-600: #705301;
  --ref-color-amber-700: #5c4300;
  --ref-color-amber-800: #483402;
  --ref-color-amber-900: #362601;
  --ref-color-plum-50: #fff3fa;
  --ref-color-plum-100: #fee4f4;
  --ref-color-plum-200: #ffc7eb;
  --ref-color-plum-300: #eea2d4;
  --ref-color-plum-400: #c57dae;
  --ref-color-plum-500: #9b5686;
  --ref-color-plum-600: #7f3c6b;
  --ref-color-plum-700: #6d2c5a;
  --ref-color-plum-800: #532545;
  --ref-color-plum-900: #421535;
  --ref-color-cobalt-50: #f3f7ff;
  --ref-color-cobalt-100: #e3edff;
  --ref-color-cobalt-200: #c8dcfe;
  --ref-color-cobalt-300: #9bbeff;
  --ref-color-cobalt-400: #6095fa;
  --ref-color-cobalt-500: #3a6cce;
  --ref-color-cobalt-600: #2151af;
  --ref-color-cobalt-700: #0f3f9c;
  --ref-color-cobalt-800: #113375;
  --ref-color-cobalt-900: #032262;
  --ref-color-green-50: #edfcea;
  --ref-color-green-100: #dbf6d5;
  --ref-color-green-200: #bbeab1;
  --ref-color-green-300: #90d281;
  --ref-color-green-400: #6bac5c;
  --ref-color-green-500: #448335;
  --ref-color-green-600: #296818;
  --ref-color-green-700: #165701;
  --ref-color-green-800: #17430b;
  --ref-color-green-900: #093300;
  --ref-color-violet-50: #f7f5ff;
  --ref-color-violet-100: #eeeafe;
  --ref-color-violet-200: #ddd4ff;
  --ref-color-violet-300: #c3affe;
  --ref-color-violet-400: #9e87e0;
  --ref-color-violet-500: #7860b5;
  --ref-color-violet-600: #5f4598;
  --ref-color-violet-700: #4f3485;
  --ref-color-violet-800: #3d2b64;
  --ref-color-violet-900: #2e1b53;
  --ref-color-olive-50: #f7f9e5;
  --ref-color-olive-100: #eef0cc;
  --ref-color-olive-200: #dee09f;
  --ref-color-olive-300: #c2c564;
  --ref-color-olive-400: #9d9e3d;
  --ref-color-olive-500: #767700;
  --ref-color-olive-600: #5c5c01;
  --ref-color-olive-700: #4b4b02;
  --ref-color-olive-800: #3b3b00;
  --ref-color-olive-900: #2b2b01;
  --ref-color-cerulean-50: #eef9ff;
  --ref-color-cerulean-100: #d8f1ff;
  --ref-color-cerulean-200: #aee4fe;
  --ref-color-cerulean-300: #60ccfc;
  --ref-color-cerulean-400: #32a5d4;
  --ref-color-cerulean-500: #077ca4;
  --ref-color-cerulean-600: #056180;
  --ref-color-cerulean-700: #044f69;
  --ref-color-cerulean-800: #033e53;
  --ref-color-cerulean-900: #002d3f;
  --ref-color-terracotta-50: #fef4f2;
  --ref-color-terracotta-100: #ffe7e0;
  --ref-color-terracotta-200: #fecec2;
  --ref-color-terracotta-300: #ffa28a;
  --ref-color-terracotta-400: #dc785f;
  --ref-color-terracotta-500: #b05139;
  --ref-color-terracotta-600: #92361f;
  --ref-color-terracotta-700: #7f230b;
  --ref-color-terracotta-800: #602010;
  --ref-color-terracotta-900: #4e0e00;
  /* ---- sys: non-colour (artifact) ---- */
  --sys-space-4: 4px;
  --sys-space-8: 8px;
  --sys-space-12: 12px;
  --sys-space-16: 16px;
  --sys-space-20: 20px;
  --sys-space-24: 24px;
  --sys-space-28: 28px;
  --sys-space-32: 32px;
  --sys-space-40: 40px;
  --sys-space-48: 48px;
  --sys-space-56: 56px;
  --sys-space-64: 64px;
  --sys-space-72: 72px;
  --sys-space-88: 88px;
  --sys-space-96: 96px;
  --sys-space-120: 120px;
  --sys-container-max: 1160px;
  --sys-container-narrow: 760px;
  --sys-container-wide: 1320px;
  --sys-gutter-mobile: 24px;
  --sys-gutter-tablet: 40px;
  --sys-grid-gap: 24px;
  --sys-section-pad-mobile: 48px;
  --sys-section-pad-tablet: 64px;
  --sys-section-pad-desktop: 96px;
  --sys-radius-button: 2px;
  --sys-radius-input: 2px;
  --sys-radius-chip: 2px;
  --sys-radius-card: 4px;
  --sys-radius-modal: 4px;
  --sys-radius-indicator: 999px;
  --sys-border-width-hairline: 1px;
  --sys-border-width-strong: 2px;
  --sys-focus-ring-width: 2px;
  --sys-focus-ring-offset: 2px;
  --sys-opacity-disabled: 0.4;
  --sys-opacity-muted: 0.7;
  --sys-control-h-sm: 32px;
  --sys-control-h-md: 40px;
  --sys-control-h-lg: 48px;
  --sys-control-box: 18px;
  --sys-control-icon-sm: 16px;
  --sys-control-icon-md: 20px;
  --sys-control-icon-lg: 24px;
  --sys-control-dot: 6px;
  --sys-control-radio-dot: 8px;
  --sys-control-switch-w: 36px;
  --sys-control-switch-h: 20px;
  --sys-control-bar: 8px;
  --sys-z-sticky: 20;
  --sys-z-dropdown: 40;
  --sys-z-overlay: 60;
  --sys-z-modal: 70;
  --sys-z-toast: 90;
  /* ---- sys: non-colour tiers only the mirror carries ---- */
  --sys-weight-display: var(--ref-font-weight-300);
  --sys-weight-body: var(--ref-font-weight-400);
  --sys-weight-label: var(--ref-font-weight-500);
  --sys-weight-emphasis: var(--ref-font-weight-600);
  --sys-weight-strong: var(--ref-font-weight-700);
  --sys-motion-press: var(--ref-duration-instant);
  --sys-motion-ui: var(--ref-duration-fast);
  --sys-motion-overlay: var(--ref-duration-slow);
  --sys-ease-standard: var(--ref-ease-standard);
  /* ---- sys: colour roles, light (artifact) ---- */
  --sys-color-text-primary: var(--ref-color-ink-900);
  --sys-color-text-secondary: var(--ref-color-warm-grey-500);
  --sys-color-text-on-fill: var(--ref-color-warm-paper-50);
  --sys-color-text-placeholder: var(--ref-color-warm-grey-500-a70);
  --sys-color-surface-base: var(--ref-color-warm-paper-50);
  --sys-color-surface-raised: var(--ref-color-warm-paper-100);
  --sys-color-surface-input: var(--ref-color-paper-white);
  --sys-color-surface-fill: var(--ref-color-ink-900);
  --sys-color-border-hairline: var(--ref-color-warm-grey-200);
  --sys-color-border-strong: var(--ref-color-warm-grey-500);
  --sys-color-border-active: var(--ref-color-ink-900);
  --sys-overlay-hover: var(--ref-color-ink-900-a8);
  --sys-overlay-press: var(--ref-color-ink-900-a12);
  --sys-color-scrim: var(--ref-color-ink-900-a60);
  --sys-focus-ring-color: var(--sys-color-text-primary);
  --sys-focus-ring-gap-color: var(--sys-color-surface-base);
  --sys-aurora-light-base: var(--ref-color-warm-paper-50);
  --sys-aurora-light-scrim: var(--ref-color-warm-paper-50-a66);
  --sys-aurora-dark-base: var(--ref-color-warm-paper-50-dark);
  --sys-aurora-dark-scrim: var(--ref-color-warm-paper-50-dark-a62);
  --sys-color-danger-text: var(--ref-color-clay-500);
  --sys-color-danger-subtle: var(--ref-color-clay-50);
  --sys-color-danger-border: var(--ref-color-clay-500);
  --sys-color-danger-fill: var(--ref-color-clay-500);
  --sys-color-danger-on-fill: var(--ref-color-warm-paper-50);
  --sys-color-warning-text: var(--ref-color-rust-600);
  --sys-color-warning-subtle: var(--ref-color-rust-50);
  --sys-color-warning-border: var(--ref-color-rust-500);
  --sys-color-warning-fill: var(--ref-color-rust-500);
  --sys-color-warning-on-fill: var(--ref-color-warm-paper-50);
  --sys-color-success-text: var(--ref-color-moss-700);
  --sys-color-success-subtle: var(--ref-color-moss-50);
  --sys-color-success-border: var(--ref-color-moss-500);
  --sys-color-success-fill: var(--ref-color-moss-500);
  --sys-color-success-on-fill: var(--ref-color-warm-paper-50);
  --sys-color-info-text: var(--ref-color-slate-600);
  --sys-color-info-subtle: var(--ref-color-slate-50);
  --sys-color-info-border: var(--ref-color-slate-500);
  --sys-color-info-fill: var(--ref-color-slate-500);
  --sys-color-info-on-fill: var(--ref-color-warm-paper-50);
  --sys-color-accent-text: var(--ref-color-amber-700);
  --sys-color-accent-subtle: var(--ref-color-amber-50);
  --sys-color-accent-border: var(--ref-color-amber-500);
  --sys-color-accent-fill: var(--ref-color-amber-300);
  --sys-color-accent-on-fill: var(--ref-color-ink-900);
  --sys-color-action-danger: var(--sys-color-danger-text);
  --sys-color-action-success: var(--sys-color-success-text);
  --sys-color-category-1: var(--ref-color-amber-500);
  --sys-color-category-1-subtle: var(--ref-color-amber-50);
  --sys-color-category-1-text: var(--ref-color-amber-600);
  --sys-color-category-2: var(--ref-color-plum-500);
  --sys-color-category-2-subtle: var(--ref-color-plum-50);
  --sys-color-category-2-text: var(--ref-color-plum-600);
  --sys-color-category-3: var(--ref-color-cobalt-500);
  --sys-color-category-3-subtle: var(--ref-color-cobalt-50);
  --sys-color-category-3-text: var(--ref-color-cobalt-600);
  --sys-color-category-4: var(--ref-color-green-600);
  --sys-color-category-4-subtle: var(--ref-color-green-50);
  --sys-color-category-4-text: var(--ref-color-green-600);
  --sys-color-category-5: var(--ref-color-violet-500);
  --sys-color-category-5-subtle: var(--ref-color-violet-50);
  --sys-color-category-5-text: var(--ref-color-violet-600);
  --sys-color-category-6: var(--ref-color-olive-500);
  --sys-color-category-6-subtle: var(--ref-color-olive-50);
  --sys-color-category-6-text: var(--ref-color-olive-600);
  --sys-color-category-7: var(--ref-color-cerulean-500);
  --sys-color-category-7-subtle: var(--ref-color-cerulean-50);
  --sys-color-category-7-text: var(--ref-color-cerulean-600);
  --sys-color-category-8: var(--ref-color-terracotta-500);
  --sys-color-category-8-subtle: var(--ref-color-terracotta-50);
  --sys-color-category-8-text: var(--ref-color-terracotta-600);
}
[data-theme="dark"] {
  --sys-color-text-primary: var(--ref-color-ink-900-dark);
  --sys-color-text-secondary: var(--ref-color-warm-grey-500-dark);
  --sys-color-text-on-fill: var(--ref-color-warm-paper-50-dark);
  --sys-color-text-placeholder: var(--ref-color-warm-grey-500-dark-a70);
  --sys-color-surface-base: var(--ref-color-warm-paper-50-dark);
  --sys-color-surface-raised: var(--ref-color-warm-paper-100-dark);
  --sys-color-surface-input: var(--ref-color-warm-paper-100-dark);
  --sys-color-surface-fill: var(--ref-color-ink-900-dark);
  --sys-color-border-hairline: var(--ref-color-warm-grey-200-dark);
  --sys-color-border-strong: var(--ref-color-warm-grey-500-dark);
  --sys-color-border-active: var(--ref-color-ink-900-dark);
  --sys-overlay-hover: var(--ref-color-ink-900-a8);
  --sys-overlay-press: var(--ref-color-ink-900-a12);
  --sys-color-scrim: var(--ref-color-ink-900-a60);
  --sys-focus-ring-color: var(--sys-color-text-primary);
  --sys-focus-ring-gap-color: var(--sys-color-surface-base);
  --sys-aurora-light-base: var(--ref-color-warm-paper-50);
  --sys-aurora-light-scrim: var(--ref-color-warm-paper-50-a66);
  --sys-aurora-dark-base: var(--ref-color-warm-paper-50-dark);
  --sys-aurora-dark-scrim: var(--ref-color-warm-paper-50-dark-a62);
  --sys-color-danger-text: var(--ref-color-clay-300);
  --sys-color-danger-subtle: var(--ref-color-clay-900);
  --sys-color-danger-border: var(--ref-color-clay-500-dark);
  --sys-color-danger-fill: var(--ref-color-clay-500-dark);
  --sys-color-danger-on-fill: var(--ref-color-warm-paper-50-dark);
  --sys-color-warning-text: var(--ref-color-rust-200);
  --sys-color-warning-subtle: var(--ref-color-rust-900);
  --sys-color-warning-border: var(--ref-color-rust-400);
  --sys-color-warning-fill: var(--ref-color-rust-300);
  --sys-color-warning-on-fill: var(--ref-color-warm-paper-50-dark);
  --sys-color-success-text: var(--ref-color-moss-200);
  --sys-color-success-subtle: var(--ref-color-moss-900);
  --sys-color-success-border: var(--ref-color-moss-500-dark);
  --sys-color-success-fill: var(--ref-color-moss-500-dark);
  --sys-color-success-on-fill: var(--ref-color-warm-paper-50-dark);
  --sys-color-info-text: var(--ref-color-slate-300);
  --sys-color-info-subtle: var(--ref-color-slate-900);
  --sys-color-info-border: var(--ref-color-slate-400);
  --sys-color-info-fill: var(--ref-color-slate-300);
  --sys-color-info-on-fill: var(--ref-color-warm-paper-50-dark);
  --sys-color-accent-text: var(--ref-color-amber-300);
  --sys-color-accent-subtle: var(--ref-color-amber-900);
  --sys-color-accent-border: var(--ref-color-amber-400);
  --sys-color-accent-fill: var(--ref-color-amber-300);
  --sys-color-accent-on-fill: var(--ref-color-ink-900);
  --sys-color-action-danger: var(--sys-color-danger-text);
  --sys-color-action-success: var(--sys-color-success-text);
  --sys-color-category-1: var(--ref-color-amber-500);
  --sys-color-category-1-subtle: var(--ref-color-amber-900);
  --sys-color-category-1-text: var(--ref-color-amber-300);
  --sys-color-category-2: var(--ref-color-plum-500);
  --sys-color-category-2-subtle: var(--ref-color-plum-900);
  --sys-color-category-2-text: var(--ref-color-plum-300);
  --sys-color-category-3: var(--ref-color-cobalt-500);
  --sys-color-category-3-subtle: var(--ref-color-cobalt-900);
  --sys-color-category-3-text: var(--ref-color-cobalt-300);
  --sys-color-category-4: var(--ref-color-green-500);
  --sys-color-category-4-subtle: var(--ref-color-green-900);
  --sys-color-category-4-text: var(--ref-color-green-300);
  --sys-color-category-5: var(--ref-color-violet-500);
  --sys-color-category-5-subtle: var(--ref-color-violet-900);
  --sys-color-category-5-text: var(--ref-color-violet-300);
  --sys-color-category-6: var(--ref-color-olive-500);
  --sys-color-category-6-subtle: var(--ref-color-olive-900);
  --sys-color-category-6-text: var(--ref-color-olive-300);
  --sys-color-category-7: var(--ref-color-cerulean-500);
  --sys-color-category-7-subtle: var(--ref-color-cerulean-900);
  --sys-color-category-7-text: var(--ref-color-cerulean-300);
  --sys-color-category-8: var(--ref-color-terracotta-500);
  --sys-color-category-8-subtle: var(--ref-color-terracotta-900);
  --sys-color-category-8-text: var(--ref-color-terracotta-300);
}