:root,
[data-srm-theme="dark"] {
  color-scheme: dark;
  --srm-app-version: "4.0.4.12";

  /* Canvas and application chrome */
  --srm-canvas: #050506;
  --srm-canvas-2: #09090a;
  --srm-bg: var(--srm-canvas);
  --srm-app-background: var(--srm-canvas);
  --srm-page-background: var(--srm-canvas-2);
  --srm-sidebar-background: #09090a;
  --srm-header-background: rgba(9, 9, 10, 0.97);

  /* Ordered dark surfaces */
  --srm-surface-0: #09090a;
  --srm-surface-1: #101112;
  --srm-surface-2: #161718;
  --srm-surface-3: #1d1f21;
  --srm-surface-elevated: rgba(22, 23, 24, 0.97);
  --srm-surface-modal: #141516;
  --srm-surface-drawer: #101112;
  --srm-surface-hover: #202224;
  --srm-surface-selected: rgba(228, 228, 228, 0.12);
  --srm-surface-glass: rgba(10, 10, 10, 0.88);

  /* Borders and dividers */
  --srm-border-subtle: rgba(228, 228, 228, 0.10);
  --srm-border: rgba(228, 228, 228, 0.16);
  --srm-border-default: var(--srm-border);
  --srm-border-strong: rgba(228, 228, 228, 0.27);
  --srm-border-interactive: rgba(240, 240, 240, 0.34);
  --srm-border-error: rgba(212, 109, 122, 0.58);
  --srm-border-focus: rgba(248, 248, 248, 0.58);
  --srm-divider: var(--srm-border-subtle);

  /* Text */
  --srm-text: #f4f4f4;
  --srm-text-primary: var(--srm-text);
  --srm-text-secondary: #d0d0d0;
  --srm-text-muted: #aeaeae;
  --srm-text-disabled: #808080;
  --srm-text-inverse: #09090a;
  --srm-text-accent: #f4f4f4;
  --srm-text-success: #a8ddc5;
  --srm-text-warning: #e8d09e;
  --srm-text-error: #f0b6be;

  /* Brand accent */
  --srm-accent: #dedede;
  --srm-accent-2: #b6b6b6;
  --srm-accent-hover: #f0f0f0;
  --srm-accent-pressed: #c4c4c4;
  --srm-accent-subtle: rgba(228, 228, 228, 0.10);
  --srm-accent-border: rgba(228, 228, 228, 0.27);
  --srm-accent-text: #f7f7f7;

  /* System states. Green stays limited to success/status UI. */
  --srm-danger: #d46d7a;
  --srm-error: var(--srm-danger);
  --srm-warning: #c8a45d;
  --srm-success: #4fae83;
  --srm-info: #bababa;
  --srm-error-subtle: rgba(212, 109, 122, 0.12);
  --srm-error-border: rgba(212, 109, 122, 0.42);
  --srm-warning-subtle: rgba(200, 164, 93, 0.12);
  --srm-warning-border: rgba(200, 164, 93, 0.38);
  --srm-success-subtle: rgba(79, 174, 131, 0.11);
  --srm-success-border: rgba(79, 174, 131, 0.34);
  --srm-info-subtle: rgba(186, 186, 186, 0.10);
  --srm-info-border: rgba(186, 186, 186, 0.28);
  --srm-disabled: rgba(132, 132, 132, 0.18);
  --srm-loading: rgba(228, 228, 228, 0.16);

  /* Shape */
  --srm-radius-xs: 5px;
  --srm-radius-sm: 7px;
  --srm-radius-md: 9px;
  --srm-radius-lg: 12px;
  --srm-radius-xl: 16px;
  --srm-radius-pill: 999px;

  /* Spacing */
  --srm-space-0: 0;
  --srm-space-1: 4px;
  --srm-space-2: 8px;
  --srm-space-3: 12px;
  --srm-space-4: 16px;
  --srm-space-5: 20px;
  --srm-space-6: 24px;
  --srm-space-8: 32px;
  --srm-space-10: 40px;
  --srm-space-12: 48px;

  /* Stable control dimensions */
  --srm-control-height-sm: 36px;
  --srm-control-height: 42px;
  --srm-control-height-lg: 48px;
  --srm-touch-target: 44px;
  --srm-icon-size: 20px;

  /* Typography */
  --srm-font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --srm-font-size-xs: 12px;
  --srm-font-size-sm: 13px;
  --srm-font-size-md: 15px;
  --srm-font-size-lg: 18px;
  --srm-font-size-xl: 24px;
  --srm-font-size-2xl: 30px;
  --srm-font-weight-regular: 400;
  --srm-font-weight-medium: 600;
  --srm-font-weight-semibold: 700;
  --srm-font-weight-bold: 800;
  --srm-line-tight: 1.2;
  --srm-line-normal: 1.45;

  /* Motion */
  --srm-duration-fast: 120ms;
  --srm-duration-normal: 200ms;
  --srm-duration-slow: 320ms;
  --srm-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --srm-ease-emphasized: cubic-bezier(.16, .84, .22, 1);
  --srm-motion-fast: var(--srm-duration-fast) var(--srm-ease-standard);
  --srm-motion: var(--srm-duration-normal) var(--srm-ease-standard);
  --srm-motion-slow: var(--srm-duration-slow) var(--srm-ease-emphasized);

  /* Elevation and layering */
  --srm-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.24);
  --srm-shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
  --srm-shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.46);
  --srm-focus-ring: 0 0 0 3px rgba(242, 242, 242, 0.13), 0 0 0 1px rgba(242, 242, 242, 0.42);
  --srm-overlay: rgba(4, 4, 4, 0.76);
  --srm-backdrop: rgba(4, 4, 4, 0.82);
  --srm-z-base: 0;
  --srm-z-sticky: 20;
  --srm-z-dropdown: 40;
  --srm-z-overlay: 60;
  --srm-z-modal: 80;
  --srm-z-toast: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --srm-duration-fast: 1ms;
    --srm-duration-normal: 1ms;
    --srm-duration-slow: 1ms;
    --srm-motion-fast: 1ms linear;
    --srm-motion: 1ms linear;
    --srm-motion-slow: 1ms linear;
  }
}