/* MRCL Make UI addendum v0.1.1 — 2026-10-09
   Semantic token starter only; not a component library.
   Load the licensed MRCL Regular font separately. See the UI Rules guide. */
:root {
  --mrcl-brand-purple: #9174F1;
  --mrcl-brand-terracotta: #D15B3B;
  --mrcl-brand-soft-yellow: #F4ED70;
  --mrcl-brand-chalk: #F2F2F2;
  --mrcl-brand-violet-ink: #0D0D0D;
  --mrcl-brand-deep-violet: #34264F;
  --mrcl-brand-lilac-mist: #E4DDF8;
}
:root, :root[data-theme="light"] {
  --mrcl-page: #F2F2F2;
  --mrcl-text: #0D0D0D;
  --mrcl-surface: #E8E8E8;
  --mrcl-panel: #E9E6F0;
  --mrcl-panel-alt: #E4DDF8;
  --mrcl-line: #D3D3D3;
  --mrcl-muted: #606060;
  --mrcl-secondary: #49434F;
  --mrcl-nav-bg: #F2F2F2F5;
  --mrcl-field: #F8F8F8;
  --mrcl-positive: #6544B5;
  --mrcl-pending: #77671A;
  --mrcl-notice-bg: #EEEDCF;
  --mrcl-notice-text: #4E4B34;
}
:root[data-theme="dark"] {
  --mrcl-page: #0D0D0D;
  --mrcl-text: #F2F2F2;
  --mrcl-surface: #191919;
  --mrcl-panel: #231E2E;
  --mrcl-panel-alt: #30263F;
  --mrcl-line: #3F3C43;
  --mrcl-muted: #B2ADB8;
  --mrcl-secondary: #D0C8DA;
  --mrcl-nav-bg: #0D0D0DF5;
  --mrcl-field: #151515;
  --mrcl-positive: #BAA1FF;
  --mrcl-pending: #F4ED70;
  --mrcl-notice-bg: #302C1A;
  --mrcl-notice-text: #E9E3BD;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
  --mrcl-page: #0D0D0D;
  --mrcl-text: #F2F2F2;
  --mrcl-surface: #191919;
  --mrcl-panel: #231E2E;
  --mrcl-panel-alt: #30263F;
  --mrcl-line: #3F3C43;
  --mrcl-muted: #B2ADB8;
  --mrcl-secondary: #D0C8DA;
  --mrcl-nav-bg: #0D0D0DF5;
  --mrcl-field: #151515;
  --mrcl-positive: #BAA1FF;
  --mrcl-pending: #F4ED70;
  --mrcl-notice-bg: #302C1A;
  --mrcl-notice-text: #E9E3BD;
}
}
:root {
  --mrcl-radius-control: 8px;
  --mrcl-radius-card: 14px;
  --mrcl-radius-panel: 20px;
  --mrcl-radius-pill: 999px;
}
:root {
  --mrcl-layout-max-content: 1440px;
  --mrcl-layout-gutter-wide: 56px;
  --mrcl-layout-gutter-medium: 32px;
  --mrcl-layout-gutter-small: 20px;
  --mrcl-layout-section-wide: 88px;
  --mrcl-layout-card-gap: 14px;
}
:root {
  --mrcl-motion-hover-fade: 750ms;
  --mrcl-motion-hover-ease: cubic-bezier(.22,.61,.36,1);
  --mrcl-motion-hover-drift: 6s;
  --mrcl-motion-circular-phase: 16s;
  --mrcl-motion-living-field: 24s;
  --mrcl-motion-lattice-cycle: 32s;
  --mrcl-motion-stage-enter: 640ms;
  --mrcl-motion-stage-enter-delay: 120ms;
  --mrcl-motion-stage-exit: 360ms;
  --mrcl-motion-stage-fade-ease: cubic-bezier(.4,0,.2,1);
  --mrcl-motion-panel-resize: 640ms;
  --mrcl-motion-card-reflow: 460ms;
  --mrcl-motion-detail-enter: 320ms;
  --mrcl-motion-detail-enter-delay: 80ms;
  --mrcl-motion-detail-exit: 140ms;
  --mrcl-motion-state-ease: cubic-bezier(.22,.61,.36,1);
}
/* Proposed accessibility tokens — validate each component and adjacent surface. */
:root {
  --mrcl-focus: #6544B5;
  --mrcl-control-border: #77717E;
  --mrcl-target-min: 44px;
  --mrcl-label-min: 12px;
  --mrcl-control-text-min: 14px;
  --mrcl-focus-width: 2px;
  --mrcl-focus-offset: 3px;
}
:root[data-theme="dark"] {
  --mrcl-focus: #BAA1FF;
  --mrcl-control-border: #81798B;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
  --mrcl-focus: #BAA1FF;
  --mrcl-control-border: #81798B;
}
}
/* Reference material only. Use the supplied Chromatic renderer for brand motion. */
:root { --mrcl-chromatic: linear-gradient(110deg, #34264F 0%, #9174F1 16%, #F2F2F2 32%, #F2F2F2 38%, #F4ED70 48%, #D15B3B 62%, #9174F1 82%, #34264F 100%); }
/* Responsive content gutters; breakpoints cannot be CSS custom properties in media queries. */
:root { --mrcl-gutter: 56px; }
@media (max-width:1100px) { :root { --mrcl-gutter:32px; } }
@media (max-width:760px) { :root { --mrcl-gutter:20px; } }
/* Apply reduced motion in components: a token alone cannot pause JS/canvas renderers. */