/*
 * Megaservice Platform — Design Tokens v0.1 / P0.1.
 * Source of truth: docs/frontend/03-design-tokens.md.
 * Scoped declarations only: no component styles or storefront themes.
 * This asset is not loaded by any template yet.
 */
.ms-ui {
  /* Primitive colors: brand. */
  --ms-color-blue-50: #EFF6FF;
  --ms-color-blue-100: #DBEAFE;
  --ms-color-blue-200: #BFDBFE;
  --ms-color-blue-300: #93C5FD;
  --ms-color-blue-400: #60A5FA;
  --ms-color-blue-500: #3B82F6;
  --ms-color-blue-600: #2563EB;
  --ms-color-blue-700: #1D4ED8;
  --ms-color-blue-800: #1E40AF;
  --ms-color-blue-900: #1E3A8A;
  --ms-color-blue-950: #172554;

  /* Primitive colors: neutrals. */
  --ms-color-neutral-50: #F8FAFC;
  --ms-color-neutral-100: #F1F5F9;
  --ms-color-neutral-200: #E2E8F0;
  --ms-color-neutral-300: #CBD5E1;
  --ms-color-neutral-400: #94A3B8;
  --ms-color-neutral-500: #64748B;
  --ms-color-neutral-600: #475569;
  --ms-color-neutral-700: #334155;
  --ms-color-neutral-800: #1E293B;
  --ms-color-neutral-900: #0F172A;
  --ms-color-neutral-950: #020617;
  --ms-color-white: #FFFFFF;

  /* Primitive colors: status families. */
  --ms-color-green-50: #F0FDF4;
  --ms-color-green-200: #BBF7D0;
  --ms-color-green-700: #15803D;
  --ms-color-green-800: #166534;
  --ms-color-amber-50: #FFFBEB;
  --ms-color-amber-200: #FDE68A;
  --ms-color-amber-700: #B45309;
  --ms-color-amber-800: #92400E;
  --ms-color-red-50: #FEF2F2;
  --ms-color-red-200: #FECACA;
  --ms-color-red-700: #B91C1C;
  --ms-color-red-800: #991B1B;
  --ms-color-red-900: #7F1D1D;
  --ms-color-cyan-50: #ECFEFF;
  --ms-color-cyan-200: #A5F3FC;
  --ms-color-cyan-700: #0E7490;
  --ms-color-cyan-800: #155E75;

  /* Semantic colors: backgrounds, text and borders. */
  --ms-color-background-canvas: var(--ms-color-neutral-50);
  --ms-color-background-surface: var(--ms-color-white);
  --ms-color-background-subtle: var(--ms-color-neutral-100);
  --ms-color-background-inverse: var(--ms-color-neutral-900);
  --ms-color-background-brand-subtle: var(--ms-color-blue-50);
  /* Approved composite value: neutral.900 at 48% opacity. */
  --ms-color-background-scrim: rgba(15, 23, 42, 0.48);
  --ms-color-text-primary: var(--ms-color-neutral-900);
  --ms-color-text-secondary: var(--ms-color-neutral-700);
  --ms-color-text-muted: var(--ms-color-neutral-600);
  --ms-color-text-inverse: var(--ms-color-white);
  --ms-color-text-link: var(--ms-color-blue-700);
  --ms-color-text-link-hover: var(--ms-color-blue-800);
  --ms-color-border-default: var(--ms-color-neutral-300);
  --ms-color-border-subtle: var(--ms-color-neutral-200);
  --ms-color-border-strong: var(--ms-color-neutral-500);
  --ms-color-border-focus: var(--ms-color-blue-600);
  --ms-color-border-focus-inverse: var(--ms-color-blue-300);

  /* Semantic colors: actions and their states. */
  --ms-color-action-primary-background: var(--ms-color-blue-600);
  --ms-color-action-primary-hover: var(--ms-color-blue-700);
  --ms-color-action-primary-active: var(--ms-color-blue-800);
  --ms-color-action-primary-text: var(--ms-color-white);
  --ms-color-action-secondary-background: var(--ms-color-white);
  --ms-color-action-secondary-border: var(--ms-color-neutral-500);
  --ms-color-action-secondary-text: var(--ms-color-neutral-700);
  --ms-color-action-secondary-hover: var(--ms-color-neutral-100);
  --ms-color-action-secondary-active: var(--ms-color-neutral-200);
  --ms-color-action-danger-background: var(--ms-color-red-700);
  --ms-color-action-danger-hover: var(--ms-color-red-800);
  --ms-color-action-danger-active: var(--ms-color-red-900);
  --ms-color-action-danger-text: var(--ms-color-white);
  --ms-color-action-disabled-background: var(--ms-color-neutral-100);
  --ms-color-action-disabled-border: var(--ms-color-neutral-300);
  --ms-color-action-disabled-text: var(--ms-color-neutral-600);

  /* Semantic colors: feedback and controls. */
  --ms-color-status-success-background: var(--ms-color-green-50);
  --ms-color-status-success-border: var(--ms-color-green-200);
  --ms-color-status-success-text: var(--ms-color-green-800);
  --ms-color-status-success-icon: var(--ms-color-green-700);
  --ms-color-status-warning-background: var(--ms-color-amber-50);
  --ms-color-status-warning-border: var(--ms-color-amber-200);
  --ms-color-status-warning-text: var(--ms-color-amber-800);
  --ms-color-status-warning-icon: var(--ms-color-amber-700);
  --ms-color-status-danger-background: var(--ms-color-red-50);
  --ms-color-status-danger-border: var(--ms-color-red-200);
  --ms-color-status-danger-text: var(--ms-color-red-800);
  --ms-color-status-danger-icon: var(--ms-color-red-700);
  --ms-color-status-info-background: var(--ms-color-cyan-50);
  --ms-color-status-info-border: var(--ms-color-cyan-200);
  --ms-color-status-info-text: var(--ms-color-cyan-800);
  --ms-color-status-info-icon: var(--ms-color-cyan-700);
  --ms-color-control-border-error: var(--ms-color-red-700);
  --ms-color-control-read-only-background: var(--ms-color-background-subtle);

  /* Typography primitives: family, weights, sizes and rhythm. */
  --ms-font-family-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ms-font-weight-regular: 400;
  --ms-font-weight-medium: 500;
  --ms-font-weight-semibold: 600;
  --ms-font-weight-bold: 700;
  --ms-font-size-xs: 0.75rem;
  --ms-font-size-sm: 0.875rem;
  --ms-font-size-md: 1rem;
  --ms-font-size-lg: 1.125rem;
  --ms-font-size-xl: 1.25rem;
  --ms-font-size-2xl: 1.5rem;
  --ms-font-size-3xl: 2rem;
  --ms-font-size-4xl: 2.5rem;
  --ms-font-size-5xl: 3rem;
  --ms-font-line-height-compact: 1.2;
  --ms-font-line-height-normal: 1.5;
  --ms-font-line-height-relaxed: 1.7;
  --ms-font-letter-spacing-normal: 0em;
  --ms-font-letter-spacing-heading: -0.02em;

  /* Typography roles: semantic aliases, not heading styles. */
  --ms-type-display-size: var(--ms-font-size-4xl);
  --ms-type-display-weight: var(--ms-font-weight-bold);
  --ms-type-display-line-height: var(--ms-font-line-height-compact);
  --ms-type-display-letter-spacing: var(--ms-font-letter-spacing-heading);
  --ms-type-h1-size: var(--ms-font-size-3xl);
  --ms-type-h1-weight: var(--ms-font-weight-bold);
  --ms-type-h1-line-height: var(--ms-font-line-height-compact);
  --ms-type-h1-letter-spacing: var(--ms-font-letter-spacing-heading);
  --ms-type-h2-size: var(--ms-font-size-2xl);
  --ms-type-h2-weight: var(--ms-font-weight-semibold);
  --ms-type-h2-line-height: var(--ms-font-line-height-compact);
  --ms-type-h2-letter-spacing: var(--ms-font-letter-spacing-normal);
  --ms-type-h3-size: var(--ms-font-size-xl);
  --ms-type-h3-weight: var(--ms-font-weight-semibold);
  --ms-type-h3-line-height: var(--ms-font-line-height-compact);
  --ms-type-h3-letter-spacing: var(--ms-font-letter-spacing-normal);
  --ms-type-h4-size: var(--ms-font-size-lg);
  --ms-type-h4-weight: var(--ms-font-weight-semibold);
  --ms-type-h4-line-height: var(--ms-font-line-height-normal);
  --ms-type-h4-letter-spacing: var(--ms-font-letter-spacing-normal);
  --ms-type-body-size: var(--ms-font-size-md);
  --ms-type-body-weight: var(--ms-font-weight-regular);
  --ms-type-body-line-height: var(--ms-font-line-height-normal);
  --ms-type-body-letter-spacing: var(--ms-font-letter-spacing-normal);
  --ms-type-body-small-size: var(--ms-font-size-sm);
  --ms-type-body-small-weight: var(--ms-font-weight-regular);
  --ms-type-body-small-line-height: var(--ms-font-line-height-normal);
  --ms-type-body-small-letter-spacing: var(--ms-font-letter-spacing-normal);
  --ms-type-label-size: var(--ms-font-size-sm);
  --ms-type-label-weight: var(--ms-font-weight-medium);
  --ms-type-label-line-height: var(--ms-font-line-height-normal);
  --ms-type-label-letter-spacing: var(--ms-font-letter-spacing-normal);
  --ms-type-caption-size: var(--ms-font-size-xs);
  --ms-type-caption-weight: var(--ms-font-weight-regular);
  --ms-type-caption-line-height: var(--ms-font-line-height-normal);
  --ms-type-caption-letter-spacing: var(--ms-font-letter-spacing-normal);
  --ms-type-metric-size: var(--ms-font-size-3xl);
  --ms-type-metric-weight: var(--ms-font-weight-semibold);
  --ms-type-metric-line-height: var(--ms-font-line-height-compact);
  --ms-type-metric-letter-spacing: var(--ms-font-letter-spacing-normal);
  --ms-type-display-size-expanded: var(--ms-font-size-5xl);
  --ms-type-h1-size-expanded: var(--ms-font-size-4xl);
  --ms-type-metric-numerals: tabular-nums;

  /* Spacing primitives. */
  --ms-space-0: 0rem;
  --ms-space-1: 0.25rem;
  --ms-space-2: 0.5rem;
  --ms-space-3: 0.75rem;
  --ms-space-4: 1rem;
  --ms-space-5: 1.25rem;
  --ms-space-6: 1.5rem;
  --ms-space-8: 2rem;
  --ms-space-10: 2.5rem;
  --ms-space-12: 3rem;
  --ms-space-16: 4rem;
  --ms-space-20: 5rem;
  --ms-space-24: 6rem;

  /* Spacing aliases. */
  --ms-gap-related: var(--ms-space-2);
  --ms-gap-field: var(--ms-space-4);
  --ms-gap-group: var(--ms-space-6);
  --ms-inset-control: var(--ms-space-3);
  --ms-inset-surface: var(--ms-space-4);
  --ms-inset-surface-expanded: var(--ms-space-6);

  /* Radius primitives and component sizing aliases. */
  --ms-radius-none: 0px;
  --ms-radius-xs: 2px;
  --ms-radius-sm: 4px;
  --ms-radius-md: 6px;
  --ms-radius-lg: 8px;
  --ms-radius-xl: 12px;
  --ms-radius-full: 9999px;
  --ms-button-radius: var(--ms-radius-md);
  --ms-control-radius: var(--ms-radius-md);
  --ms-surface-radius: var(--ms-radius-lg);
  --ms-badge-radius: var(--ms-radius-sm);

  /* Borders: primitives and semantic aliases. */
  --ms-border-width-default: 1px;
  --ms-border-width-strong: 2px;
  --ms-border-style-default: solid;
  --ms-border-color-default: var(--ms-color-border-default);
  --ms-border-color-subtle: var(--ms-color-border-subtle);
  --ms-border-color-strong: var(--ms-color-border-strong);
  --ms-control-border-color: var(--ms-color-border-strong);

  /* Elevation primitives: approved composite values using neutral.900. */
  --ms-shadow-none: none;
  --ms-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --ms-shadow-sm: 0 2px 4px -1px rgba(15, 23, 42, 0.08);
  --ms-shadow-md: 0 6px 12px -3px rgba(15, 23, 42, 0.12);
  --ms-shadow-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.16);
  --ms-surface-shadow: var(--ms-shadow-none);

  /* Layout dimensions and aliases; no layouts or breakpoints are applied. */
  --ms-content-max-width-public: 70rem;
  --ms-content-max-width-dashboard: 80rem;
  --ms-content-max-width-form: 30rem;
  --ms-page-padding-mobile: var(--ms-space-4);
  --ms-page-padding-tablet: var(--ms-space-6);
  --ms-page-padding-desktop: var(--ms-space-8);
  --ms-section-gap: var(--ms-space-8);
  --ms-section-gap-public-expanded: var(--ms-space-12);

  /* Component sizing tokens; no component selectors. */
  --ms-button-height-sm: 2.25rem;
  --ms-button-height-md: 2.75rem;
  --ms-button-height-lg: 3rem;
  --ms-button-padding-inline: var(--ms-space-4);
  --ms-control-height: 2.75rem;
  --ms-control-textarea-min-height: 7.5rem;
  --ms-icon-size-xs: 0.75rem;
  --ms-icon-size-sm: 1rem;
  --ms-icon-size-md: 1.25rem;
  --ms-icon-size-lg: 1.5rem;

  /* Touch target and focus tokens. */
  --ms-interaction-target-min: 44px;
  --ms-focus-width: 3px;
  --ms-focus-offset: 2px;
  --ms-focus-style: solid;
  --ms-focus-color: var(--ms-color-border-focus);
  --ms-focus-color-inverse: var(--ms-color-border-focus-inverse);

  /* Motion tokens; no transitions, animations or media queries are applied. */
  --ms-motion-duration-fast: 100ms;
  --ms-motion-duration-normal: 180ms;
  --ms-motion-duration-slow: 240ms;
  --ms-motion-duration-reduced: 0ms;
  --ms-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ms-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --ms-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Relative stacking levels; no positioned components. */
  --ms-z-base: 0;
  --ms-z-sticky: 10;
  --ms-z-dropdown: 20;
  --ms-z-overlay: 30;
  --ms-z-modal: 40;
  --ms-z-toast: 50;
}