:root, :host {
  color-scheme: light;
  --ui-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ui-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* RGB is canonical where Bootstrap also needs a channel-only value. */
  --ui-color-bg-rgb: 244, 247, 251;
  --ui-color-surface-rgb: 255, 255, 255;
  --ui-color-primary-rgb: 79, 70, 229;
  --ui-color-primary-hover-rgb: 67, 56, 202;
  --ui-color-secondary-rgb: 71, 85, 105;
  --ui-color-success-rgb: 4, 120, 87;
  --ui-color-danger-rgb: 220, 38, 38;
  --ui-color-warning-rgb: 180, 83, 9;
  --ui-color-info-rgb: 3, 105, 161;
  --ui-color-light-rgb: 241, 245, 249;
  --ui-color-dark-rgb: 15, 23, 42;
  --ui-color-text-muted-rgb: 82, 97, 117;

  --ui-color-bg: rgb(var(--ui-color-bg-rgb));
  --ui-color-bg-strong: #eef2f7;
  --ui-color-surface: rgb(var(--ui-color-surface-rgb));
  --ui-color-surface-muted: #f8fafc;
  --ui-color-surface-raised: var(--ui-color-surface);
  --ui-color-surface-hover: #fbfcfe;
  --ui-color-border: #e5eaf1;
  --ui-color-border-strong: #d5dce6;

  --ui-color-text: rgb(var(--ui-color-dark-rgb));
  --ui-color-text-muted: rgb(var(--ui-color-text-muted-rgb));
  --ui-color-text-subtle: #5f6f86;
  --ui-color-primary: rgb(var(--ui-color-primary-rgb));
  --ui-color-primary-hover: rgb(var(--ui-color-primary-hover-rgb));
  --ui-color-primary-soft: #eef2ff;
  --ui-color-primary-border: #c7d2fe;
  --ui-color-primary-emphasis: #3730a3;
  --ui-color-secondary: rgb(var(--ui-color-secondary-rgb));
  --ui-color-secondary-hover: #334155;
  --ui-color-secondary-soft: #f1f5f9;
  --ui-color-secondary-border: #cbd5e1;
  --ui-color-secondary-emphasis: #334155;
  --ui-color-success: rgb(var(--ui-color-success-rgb));
  --ui-color-success-hover: #065f46;
  --ui-color-success-soft: #ecfdf5;
  --ui-color-success-border: #a7f3d0;
  --ui-color-success-emphasis: #065f46;
  --ui-color-warning: rgb(var(--ui-color-warning-rgb));
  --ui-color-warning-hover: #92400e;
  --ui-color-warning-soft: #fffbeb;
  --ui-color-warning-border: #fde68a;
  --ui-color-warning-emphasis: #78350f;
  --ui-color-danger: rgb(var(--ui-color-danger-rgb));
  --ui-color-danger-hover: #b91c1c;
  --ui-color-danger-soft: #fef2f2;
  --ui-color-danger-border: #fecaca;
  --ui-color-danger-emphasis: #991b1b;
  --ui-color-info: rgb(var(--ui-color-info-rgb));
  --ui-color-info-hover: #075985;
  --ui-color-info-soft: #f0f9ff;
  --ui-color-info-border: #bae6fd;
  --ui-color-info-emphasis: #0c4a6e;
  --ui-color-light: rgb(var(--ui-color-light-rgb));
  --ui-color-light-hover: #e2e8f0;
  --ui-color-light-soft: var(--ui-color-surface-muted);
  --ui-color-light-border: var(--ui-color-border-strong);
  --ui-color-light-emphasis: var(--ui-color-secondary-hover);
  --ui-color-dark: rgb(var(--ui-color-dark-rgb));
  --ui-color-dark-hover: #1e293b;
  --ui-color-dark-soft: #e2e8f0;
  --ui-color-dark-border: #94a3b8;
  --ui-color-dark-emphasis: var(--ui-color-dark);
  --ui-color-on-primary: var(--ui-color-surface);
  --ui-color-on-secondary: var(--ui-color-surface);
  --ui-color-on-success: var(--ui-color-surface);
  --ui-color-on-warning: var(--ui-color-surface);
  --ui-color-on-danger: var(--ui-color-surface);
  --ui-color-on-info: var(--ui-color-surface);
  --ui-color-on-light: var(--ui-color-text);
  --ui-color-on-dark: var(--ui-color-surface);

  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 18px;
  --ui-radius-xl: 24px;
  --ui-shadow-xs: 0 1px 2px rgba(var(--ui-color-dark-rgb), .05);
  --ui-shadow-sm: 0 6px 18px rgba(var(--ui-color-dark-rgb), .06);
  --ui-shadow-md: 0 16px 40px rgba(var(--ui-color-dark-rgb), .08);
  --ui-shadow-focus: 0 0 0 4px var(--ui-color-focus-ring);

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;
  --ui-space-12: 48px;

  /* An upstream document's root font must not rescale our shadow-root chrome.
     All shared control/type sizes derive from this one local design unit. */
  --ui-font-unit: 16px;
  --ui-font-size-base: var(--ui-font-unit);
  --ui-font-size-sm: calc(var(--ui-font-unit) * .875);
  --ui-font-size-lg: calc(var(--ui-font-unit) * 1.25);
  --ui-line-height: 1.5;
  --ui-control-height: calc(var(--ui-font-unit) * 2.375);
  --ui-control-height-sm: calc(var(--ui-font-unit) * 1.9375);
  --ui-control-height-lg: calc(var(--ui-font-unit) * 3);
  --ui-control-padding-y: calc(var(--ui-font-unit) * .375);
  --ui-control-padding-x: calc(var(--ui-font-unit) * .75);
  --ui-control-padding-y-sm: calc(var(--ui-font-unit) * .25);
  --ui-control-padding-x-sm: calc(var(--ui-font-unit) * .5);
  --ui-control-padding-y-lg: calc(var(--ui-font-unit) * .5);
  --ui-control-padding-x-lg: var(--ui-font-unit);
  --ui-control-icon-gap: calc(var(--ui-font-unit) * .375);
  --ui-control-disabled-opacity: .65;
  --ui-panel-width-sm: 30rem;
  --ui-panel-width-md: 32.5rem;
  --ui-panel-width-lg: 35rem;
  --ui-account-width: 47.5rem;
  --ui-auth-width: 27.5rem;
  --ui-color-focus-ring: rgba(var(--ui-color-primary-rgb), .16);
  --ui-auth-background: radial-gradient(circle at 20% 15%, #818cf8 0, transparent 34%), radial-gradient(circle at 85% 80%, #22d3ee 0, transparent 30%), linear-gradient(145deg, #312e81, var(--ui-color-primary) 55%, #0f172a);
  --ui-brand-background: linear-gradient(135deg, #6366f1, #22d3ee);
  --ui-color-on-primary-muted: rgba(255,255,255,.78);
  --ui-color-on-primary-soft: rgba(255,255,255,.14);
  --ui-color-on-primary-border: rgba(255,255,255,.22);
  --ui-color-on-primary-decoration: rgba(255,255,255,.16);
  --ui-color-on-primary-text: rgba(255,255,255,.9);
  --ui-color-mask: #000;
}